React中如何让类组件的动画在每次渲染时重新触发？

嘿，这个问题我之前也踩过坑！CSS动画默认只会在元素首次挂载到DOM时触发一次，要让它每次组件渲染都重新跑起来，有几个实用的方案，我给你详细说说：

方案一：利用React的key属性（最简单） #

React会把key作为元素的唯一标识，当key的值变化时，React会销毁旧的元素并重新创建一个新的——这就相当于元素重新挂载，CSS动画自然会再次触发。

你只需要给.slide元素加上一个随渲染变化的key就行，比如用组件的某个状态或者props值：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      renderCount: 0 // 用来标记渲染次数，每次渲染时更新它
    };
  }

  // 如果你需要在某个特定时机触发更新（比如props变化时），可以用componentDidUpdate
  componentDidUpdate(prevProps) {
    if (this.props.someData !== prevProps.someData) {
      this.setState(prev => ({ renderCount: prev.renderCount + 1 }));
    }
  }

  render() {
    return (
      <div>
        <div className="slide" key={this.state.renderCount}>some data</div>
      </div>
    );
  }
}

你的CSS可以保持不变：

.slide{ 
  animation: an 1s; 
} 
@keyframes an{ 
  0%{color:red} 
  100%{color:blue} 
}

方案二：手动控制动画类的添加/移除（不重新创建元素） #

如果你不想重新创建DOM元素，可以通过React的ref获取元素，在组件更新时先移除动画类，等DOM更新后再重新添加，以此触发动画。

步骤如下：

1. 创建一个ref来获取.slide元素
2. 在componentDidUpdate中处理类名的切换
3. 用requestAnimationFrame确保DOM更新完成后再添加类名

代码示例：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.slideRef = React.createRef();
  }

  componentDidUpdate(prevProps) {
    // 可以根据需要加判断，比如只有当特定props变化时才触发动画
    if (this.props.someData !== prevProps.someData) {
      const slideElement = this.slideRef.current;
      
      // 先移除动画类
      slideElement.classList.remove('slide');
      
      // 等待DOM更新后再重新添加类名
      requestAnimationFrame(() => {
        slideElement.classList.add('slide');
      });
    }
  }

  render() {
    return (
      <div>
        <div ref={this.slideRef} className="slide">some data</div>
      </div>
    );
  }
}

小提示 #

• 如果你希望每次组件渲染都无条件触发动画，可以把componentDidUpdate里的判断去掉，直接执行类名切换逻辑，但这样可能会导致不必要的动画触发，建议根据实际需求添加判断条件。
• 方案一的key方法更简洁，React会帮你处理元素的销毁和重建，适合大多数场景；方案二更适合需要保留元素状态（比如输入框内容）的情况。

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