在 React 应用程序中添加 CSS @keyframes 动画以更改状态

Posted 2023-03-07

【中文标题】在 React 应用程序中添加 CSS @keyframes 动画以更改状态

【英文标题】：Adding CSS @keyframes animation to state change in React app

【发布时间】：2016-05-21 04:37:25

【问题描述】：

我有一个带有 react-router 的 React + Flux 应用程序用于路由。有一个 .button 组件，.button_active CSS 类在 React 的 onClick 事件中切换到它，并且 toggled:true 状态正在通过 Flux Action 添加到应用程序顶部的按钮对象中。

因此 .button_active 类附加了 CSS @keyframes 动画，以动画化 .button 从常规到活动的状态变化，反之亦然。

除了动画不仅在单击（状态更改）时触发，而且在每次路由更改时触发（.button_active className 已到位，但每次路由时都会创建/销毁父 div变化，因此动画继续触发）。

有没有办法避免这种行为，但仍然使用@keyframes 动画来动画状态变化？

谢谢！

【问题讨论】：

React 通常不会在每次路由更改时销毁/重新创建元素。你还有别的事情要发生。听起来您在 onClick 事件中手动操作 DOM，这可能会导致问题。请显示一些代码。

【参考方案1】：

我认为你可以尝试删除componentWillUnmount()中的.button_active，也许这样会起作用。