React中CSS动画仅在style属性生效问题求助

我有一个根据自身state切换className的组件，发现只有把动画属性写在style属性里时，动画才会生效。即使Button.css里有完全相同的CSS属性，通过className切换也没用，取消注释组件里的style行后动画就能正常运行。

问题原因 #

这是因为React更新DOM时，仅切换className但元素未被重新创建的情况下，浏览器不会重新触发CSS动画的执行逻辑。而直接修改style属性时，浏览器会立刻检测到样式变化，从而触发动画。

解决方案 #

• 强制组件重新渲染
  给按钮添加key属性，当isActive状态变化时同步更新key，让React销毁旧组件并创建新实例，浏览器会重新加载CSS类中的动画：

  <button 
    key={isActive}
    className={isActive ? "Button active" : "Button"}
    onClick={() => setIsActive(!isActive)}
  >
    Click Me
  </button>
  

• 手动触发动画重绘
  点击时先移除动画状态，再通过setTimeout延迟恢复，利用浏览器重绘机制触发动画：

  const handleClick = () => {
    setIsActive(false);
    setTimeout(() => setIsActive(true), 10);
  };
  
  <button 
    className={isActive ? "Button active" : "Button"}
    onClick={handleClick}
  >
    Click Me
  </button>
  

• 用CSS动画播放状态控制
  不切换动画类，而是通过animation-play-state控制动画启停，切换className时仅修改播放状态：

  .Button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    animation: bounce 1s infinite;
    animation-play-state: paused;
  }
  
  .Button.active {
    animation-play-state: running;
  }
  

内容的提问来源于stack exchange，提问作者jsta1010