使用 React、Redux 制作背景颜色过渡动画时出现问题

Question

请原谅我，我对 React 还很陌生 我试图在每次更新时将背景颜色设置为从 prevColor 过渡到 bgColor 的动画。到目前为止我有以下内容

const Page = () => {

    const bgColor = useSelector((reduxState) => reduxState.color)
    const prevColor = useSelector((reduxState) => reduxState.prevcolor)

    return <>
           <style>
               {`
                #bg-fade{
                    background-color: ${prevColor};
                    animation: transition 1s;
                    animation-fill-mode: forwards;
                }

                @keyframes transition {
                    from {background-color: ${prevColor};}
                    to {background-color: ${bgColor};}
                }
    
                `}
           </style>

           <main id='bg-fade'>
               <div className='container-fluid'>
                   <Gardening />
               </div>
           </main>
           </>  
}

现在颜色过渡似乎只在我第一次进入页面或刷新时起作用。颜色的 redux 状态的后续更改不再触发动画。每次 redux 状态有更新时，我如何让它为过渡设置动画？

任何帮助将不胜感激！

Answer 1

好吧，我在看了一些相关帖子后发现了这一点。我真正想要解决的问题是触发动画重新启动。显然，动画运行一次后，要重新启动/重置并不容易。有一些技巧，但我读到的最干净的方法是触发回流。

我刚刚将以下内容添加到 useEffect 挂钩中。

useEffect(()=>{

    // trigger reflow
    let element = document.getElementById('bg-fade');
    element.classList.remove('bg-fade');
    void element.offsetWidth;
    element.classList.add('bg-fade');

},[color])

这将有效地删除，使用 offsetWidth 触发回流，然后将类重新添加回元素，动画将再次运行。

https://css-tricks.com/restart-css-animation/

CSS3 中重新启动动画：还有比删除元素更好的方法吗？