面试题：React中如何使用Hooks实现简单的淡入淡出动画效果

Question

请描述在React中，利用Hooks实现一个元素淡入淡出动画效果的基本步骤，假设你有一个按钮，点击按钮触发元素的淡入淡出，且需要使用useState和useEffect Hook来完成此功能，简单阐述代码逻辑并给出关键代码片段。

Answer 1

1. 代码逻辑：
   • 使用useState来管理元素的显示状态（是否淡入或淡出），比如定义一个状态变量isVisible。
   • 当点击按钮时，通过setIsVisible改变isVisible的值，从而控制元素的淡入淡出。
   • 使用useEffect来根据isVisible的变化添加或移除相应的CSS类，以实现淡入淡出的动画效果。
2. 关键代码片段：

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

const FadeComponent = () => {
    const [isVisible, setIsVisible] = useState(false);

    useEffect(() => {
        const element = document.getElementById('fade - element');
        if (isVisible) {
            element.classList.add('fade - in');
            element.classList.remove('fade - out');
        } else {
            element.classList.add('fade - out');
            element.classList.remove('fade - in');
        }
    }, [isVisible]);

    return (
        <div>
            <button onClick={() => setIsVisible(!isVisible)}>
                {isVisible? '隐藏' : '显示'}
            </button>
            <div id="fade - element" className={`fade - component ${isVisible? 'fade - in' : 'fade - out'}`}>
                要淡入淡出的元素
            </div>
        </div>
    );
};

export default FadeComponent;

在CSS中定义fade - in和fade - out类来实现淡入淡出效果：

.fade - component {
    opacity: 0;
    transition: opacity 0.5s ease - in - out;
}
.fade - in {
    opacity: 1;
}
.fade - out {
    opacity: 0;
}