如何在状态更改之间添加淡入淡出过渡答案

【问题标题】：How to add fade transitions in between state changes如何在状态更改之间添加淡入淡出过渡
【发布时间】：2020-11-15 15:15:52
【问题描述】：

我有这个组件，每次我更改状态的值时，我都希望它在不同颜色之间淡出，而不是立即改变，我该怎么做？

const Header = (props) => {
    const [headerColor, setHeaderColor] = useState('#c8e9e6');

    useEffect(() => {
        document.addEventListener("scroll", () => {
            console.log(window.scrollY);
            if (window.scrollY < 700) {
                setHeaderColor('#c8e9e6');
               
            } else if (window.scrollY >= 700 && window.scrollY < 1500) {
       
                setHeaderColor('#ffae5a');
            } else if (window.scrollY >= 500) {
                setHeaderColor('#b48fff');
            }
        });
    });
    return (
        <div className={classes.HeaderContainer} style={{
            backgroundColor: headerColor,
        }```);
}

【问题讨论】：

标签： javascript css reactjs react-hooks

【解决方案1】：

您可能只需使用属性transition 和 -webkit-transition 来添加一个 css 类。

例如在 2 秒后将颜色设置为橙色：

.transaition{
    background-color: #ffae5a;
    -webkit-transition: background-color 2s; /* For Safari 3.1 to 6.0 */
    transition: background-color 2s;
}

【讨论】：