React中状态更新时重复触发CSS动画的解决方案咨询

下面是几种无需创建多个元素或手动切换类的简洁方案：

方案1：利用React的key属性（最简洁） #

React会在key值变化时销毁旧元素并创建新元素，CSS动画会随之重新触发。直接将动态变化的data作为元素的key即可：

const [data, setData] = useState(0);

return(
  <>
    <div className="fade-in" key={data}>
     <p>{data}</p>
    </div>
  </>
)

CSS保持原代码不变。每次data更新，key同步变化，div会被重新渲染，动画自然重复执行。

方案2：通过useEffect动态重置动画 #

如果不想重新创建元素，可以利用useEffect监听data变化，手动重置元素的动画状态：

import { useState, useEffect, useRef } from 'react';

const [data, setData] = useState(0);
const contentRef = useRef(null);

useEffect(() => {
  const element = contentRef.current;
  // 先移除动画类，触发重绘后再重新添加
  element.classList.remove('fade-in');
  void element.offsetWidth; // 强制浏览器识别类的移除操作
  element.classList.add('fade-in');
}, [data]);

return(
  <>
    <div ref={contentRef} className="fade-in">
     <p>{data}</p>
    </div>
  </>
)

void element.offsetWidth是关键，它会强制浏览器立即重绘，确保类的移除被识别，之后重新添加类时动画会再次触发。

方案3：使用CSS Transition替代Animation #

如果可以调整动画实现方式，用transition配合状态控制透明度也是一种简洁的方式：

import { useState, useEffect } from 'react';

const [data, setData] = useState(0);
const [isVisible, setIsVisible] = useState(true);

useEffect(() => {
  // 每次data变化时，先隐藏再触发显示过渡
  setIsVisible(false);
  const timer = setTimeout(() => {
    setIsVisible(true);
  }, 10);
  return () => clearTimeout(timer);
}, [data]);

return(
  <>
    <div style={{ opacity: isVisible ? 1 : 0, transition: 'opacity 1100ms' }}>
     <p>{data}</p>
    </div>
  </>
)

这种方式不需要额外的CSS类，直接通过内联样式控制过渡效果，每次data变化时触发透明度的切换。

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