为何省略0ms sleep会导致CSS Transition失效？

这事儿确实和浏览器的事件循环+渲染机制直接相关，拆解一下逻辑：

FLIP动画的核心步骤是：

• First：记录元素初始的位置/尺寸
• Last：修改元素的状态（比如移动位置、改变大小）
• Invert：计算初始和最终状态的差值，用CSS transform把元素“拉回”到初始位置
• Play：移除transform，让CSS过渡自动生效，元素平滑回到最终位置

问题出在同步执行这些步骤时，浏览器不会即时渲染中间状态。浏览器的JS执行和页面渲染是交替进行的——同一个宏任务里的所有DOM修改，会被浏览器批量处理，等到宏任务执行完才会统一渲染。

如果你去掉0ms的延迟（也就是把Play的逻辑和前面的步骤同步执行），浏览器会把「设置最终状态→添加transform拉回→移除transform」这一串操作合并成最终结果来渲染，相当于直接跳到了最终位置，自然看不到过渡动画。

而加个0ms的setTimeout（或者用requestAnimationFrame），是把Play的逻辑放到下一个宏任务队列里。这样当前宏任务执行完后，浏览器会先渲染出「元素被transform拉回初始位置」的状态，等下一个宏任务执行时，再移除transform，此时浏览器能捕捉到状态变化，触发CSS过渡，平滑动画就出来了。

简单说：0ms延迟不是真的等0秒，是给浏览器留个“喘气”的机会，让它先把中间状态渲染出来，再执行动画的最后一步。

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