optimize doc index page slide show animation and refactor related React code

[XDean]

Motivation

The origin slide animation is not fluent.
The previous image is disappeared but not fade out.

This PR is to optimize the animation effect and the out-of-date React code.

Changes

• use React state instead of control DOM element
• use transition instead of keyframe animation

Related

Origin slide

New slide

[vercel]

Someone is attempting to deploy a commit to a Personal Account owned by @kimlimjustin on Vercel.

@kimlimjustin first needs to authorize it.

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/kimlimjustin/xplorer/7gfRGMybUgoXBerWqHYbcSAwj7zZ
✅ Preview: https://xplorer-git-fork-xdean-optimizedocindexslide-kimlimjustin.vercel.app

[XDean]

Wow @kimlimjustin. You approved so quickly!

[kimlimjustin]

Wow @kimlimjustin. You approved so quickly!

Haha, Thanks tho! Eh, I just realized that you doubled the windows image, it's supposed to be macOS on the third slide, and also you forgot to edit the alt of the image. Could you please change it? Thanks

[XDean]

Sorry @kimlimjustin . I'm so careless. I will correct it.

[kimlimjustin]

Sorry @kimlimjustin . I'm so careless. I will correct it.

It's okay haha, I don't even realize it when reviewing your code until I see the preview website xd

[XDean]

Emm, it's weird. The screenshot gif is correct. Anyway, I have fixed it.

[kimlimjustin]

TYSM tho, anyways, any other PRs regarding the website will be appreciated, including translation (cuz I don't have time to edit the website since I got a lot of works with Xplorer itself).