在React中实现CSS动画的回放

whuhewei2026-03-28 14:34

1. 使用key属性强制组件重载

React组件：

javascript 复制代码

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [key, setKey] = useState(0);

  const replay = () => {
    setKey((prevKey) => prevKey + 1); // 改变key，触发组件重新渲染
  };

  return (
    <div className="App">
      <div key={key} className="animated-element">
        内容
      </div>
      <button onClick={replay}>重播</button>
    </div>
  );
}

CSS动画：

css 复制代码

.App {
  font-family: sans-serif;
  text-align: center;
}

.animated-element {
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

缺点是会导致组件完全重新挂载，可能影响性能。

2.通过重置类名触发动画重播

React组件：

javascript 复制代码

import "./styles.css";
import React, { useState } from "react";

export default function App() {
  const [isAnimating, setIsAnimating] = useState(true);

  const replay = () => {
    // 1. 先移除动画类
    setIsAnimating(false);
    // 2. 在下一帧重新添加，触发动画重播
    requestAnimationFrame(() => {
      setIsAnimating(true);
    });
  };

  return (
    <div className="App">
      <div className={`${isAnimating ? "animated-element" : ""}`}>内容</div>
      <button onClick={replay}>重播</button>
    </div>
  );
}

CSS动画同上。

这种方式需要注意的是toggle类名的时候要在下一帧重新添加，否则会被React合并导致不生效。优点是简单直接，性能好。对于大多数简单场景，重置类名是性能和复杂度平衡的最佳选择。

动画回放演示