useEffect未嵌套setTimeout时CSS过渡动画失效问题咨询

核心原因 #

这本质是React渲染时机和浏览器重排重绘周期的匹配问题。

具体细节 #

1. 直接在useEffect修改样式的问题
   React的useEffect(() => {}, [])会在组件挂载完成后立即执行，但此时浏览器可能还没完成初始DOM的样式计算和绘制。当你直接设置e.style.top = '-200px'时，浏览器会把初始的top:0（来自CSS）和你设置的top:-200px合并成一次布局更新——它认为元素从一开始就应该处于-200px的位置，没有状态变化的过程，自然不会触发transition动画。

偶尔生效的情况，是因为某些场景下浏览器刚好在useEffect执行前完成了初始渲染，此时修改top能被识别为状态变更，过渡才会触发，但这种时机不稳定，完全取决于浏览器的调度优先级。

2. setTimeout的作用
   把样式修改逻辑放到setTimeout里，相当于把操作推迟到下一个浏览器事件循环周期执行。这时候浏览器已经完成了初始DOM的渲染和布局计算，元素的top:0状态已经被稳定记录，再修改为top:-200px时，浏览器能明确识别到这是一次属性变化，就会正常触发transition过渡动画。

补充：更优雅的替代方案 #

其实不用setTimeout也能解决，你可以用requestAnimationFrame来确保样式修改在浏览器下一次重绘前执行，效果和setTimeout类似但更贴合浏览器渲染周期：

useEffect(() => {
  requestAnimationFrame(() => {
    const elems = document.getElementsByClassName("box");
    [...elems].forEach(e => {
      e.style.top = '-200px';
    });
  });
}, []);

另外，也可以通过添加类名的方式来触发过渡，比直接操作style更符合React的风格：

.box {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
  transition: top 0.3s ease-in; /* 注意：原CSS过渡时长设为0，不会显示动画，需改为合理时长 */
}
.box.move-up {
  top: -200px;
}

useEffect(() => {
  requestAnimationFrame(() => {
    const elems = document.getElementsByClassName("box");
    [...elems].forEach(e => {
      e.classList.add('move-up');
    });
  });
}, []);

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