面试题：React中如何实现动画的事件处理与状态管理

Question

在React项目中，假设要实现一个按钮点击后，元素从不可见到可见并伴有淡入动画效果，同时动画结束后更新组件状态记录动画是否完成。请描述实现思路并给出关键代码片段。

Answer 1

实现思路

1. 状态管理：在组件中使用useState钩子来管理元素的可见性状态以及动画是否完成的状态。
2. 样式设置：利用CSS的opacity属性和transition属性来实现淡入动画。初始时opacity设为0，点击按钮后设为1，并设置合适的transition属性来控制动画时间和效果。
3. 事件处理：为按钮添加点击事件处理函数，在函数中更新元素可见性状态，并利用useEffect钩子在动画结束时更新动画完成状态。

关键代码片段

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
    const [isVisible, setIsVisible] = useState(false);
    const [animationCompleted, setAnimationCompleted] = useState(false);

    const handleClick = () => {
        setIsVisible(true);
    };

    useEffect(() => {
        const handleAnimationEnd = () => {
            setAnimationCompleted(true);
        };
        const element = document.getElementById('my-element');
        if (element) {
            element.addEventListener('animationend', handleAnimationEnd);
        }
        return () => {
            if (element) {
                element.removeEventListener('animationend', handleAnimationEnd);
            }
        };
    }, [isVisible]);

    return (
        <div>
            <button onClick={handleClick}>点击显示</button>
            <div
                id="my-element"
                style={{
                    opacity: isVisible ? 1 : 0,
                    transition: 'opacity 1s ease-in-out'
                }}
            >
                要显示的内容
            </div>
            {animationCompleted && <p>动画已完成</p>}
        </div>
    );
};

export default MyComponent;

上述代码中，isVisible控制元素的可见性，animationCompleted记录动画是否完成。点击按钮时，isVisible变为true，元素开始淡入动画。useEffect钩子监听isVisible变化，在动画结束时更新animationCompleted。同时通过CSS的opacity和transition实现淡入效果。