ReactJS CSS技术问题：如何重新触发@keyframes动画？

我明白你遇到的痛点了——CSS动画默认只会在类首次添加到元素时触发，哪怕内容更新但类名没变化，浏览器也不会重新执行动画。针对你的场景，这里有几个React专属的解决方案，能让你每次.subtitle和.text的内容变化时，都触发一次.fall-in的动画效果：

方案1：利用React的key属性（最推荐） #

React的key属性是用来标识元素唯一性的，当key值发生变化时，React会卸载旧的DOM元素，重新挂载一个新的元素。这样一来，.fall-in类会被重新添加到新元素上，自然就能触发动画了。

你只需要把.subtitle和.text的key设置为它们对应的内容（或者任何随内容变化的唯一标识）即可：

function ContentSwitcher({ currentSubtitle, currentText }) {
  return (
    <div className="content-container">
      {/* 用subtitle内容作为key，内容变化时key随之变化 */}
      <div className="subtitle fall-in" key={currentSubtitle}>
        {currentSubtitle}
      </div>
      {/* 同理，用text内容作为key */}
      <div className="text fall-in" key={currentText}>
        {currentText}
      </div>
    </div>
  );
}

这种方法完全符合React的设计范式，不需要手动操作DOM，代码简洁且可靠性高。

方案2：手动控制类的添加与移除（精细控制场景） #

如果你需要对动画触发时机有更精细的控制，可以通过React的useRef获取DOM元素，配合useEffect在内容更新时先移除动画类，再重新添加：

import { useEffect, useRef } from 'react';

function ContentSwitcher({ currentSubtitle, currentText }) {
  const subtitleRef = useRef(null);
  const textRef = useRef(null);

  useEffect(() => {
    // 先移除动画类，清除当前动画状态
    subtitleRef.current?.classList.remove('fall-in');
    textRef.current?.classList.remove('fall-in');

    // 用requestAnimationFrame确保DOM更新完成后再添加类
    requestAnimationFrame(() => {
      subtitleRef.current?.classList.add('fall-in');
      textRef.current?.classList.add('fall-in');
    });
  }, [currentSubtitle, currentText]); // 依赖内容，内容变化时触发

  return (
    <div className="content-container">
      <div className="subtitle fall-in" ref={subtitleRef}>
        {currentSubtitle}
      </div>
      <div className="text fall-in" ref={textRef}>
        {currentText}
      </div>
    </div>
  );
}

这里的requestAnimationFrame是关键——它能确保我们在浏览器完成DOM重绘后再添加动画类，避免类的移除和添加操作被浏览器合并，导致动画不触发。

方案3：重置CSS动画的播放状态（备选） #

你也可以通过CSS的animation-play-state和JavaScript重置动画时间线，但这种方法相对繁琐，不如前两种直观：

// 配合useEffect和ref
useEffect(() => {
  const subtitleEl = subtitleRef.current;
  // 重置动画时间线
  subtitleEl.style.animation = 'none';
  subtitleEl.offsetHeight; // 触发重绘
  subtitleEl.style.animation = null;
}, [currentSubtitle]);

不过这种方法需要你对CSS动画的底层机制有一定了解，一般只作为前两种方案的备选。

总结一下，优先选择方案1，它是最符合React理念的解决方案；如果需要更精细的动画控制，再考虑方案2。

内容的提问来源于stack exchange，提问作者Miha Šušteršič