JavaScript中直接调用btn.click与setTimeout包裹调用的动画差异原因

两者的差异本质是两次click触发时，页面所处的渲染阶段不同，浏览器对样式修改的合并策略不一样导致的：

点击回调的设计逻辑 #

你写的点击回调原本是想实现「红色块从1000px位置滑动到500px位置」的效果：

• 先给box设置transform: translateX(1000px)
• 通过读取getComputedStyle(box).transform强制浏览器立即计算当前样式，把1000px的位置同步到当前渲染快照中
• 再把transform改成500px，浏览器检测到前后样式差异，就会按照transition规则触发过渡动画

方法1没有出现预期动画的原因 #

直接在script标签里同步调用click()时，页面还没完成首次渲染：浏览器已经解析完DOM和CSS规则，但还没把元素的初始状态（默认translateX(0)）提交到渲染队列，也没有生成对应的渲染状态快照。
这时候同个同步任务里对transform的两次修改，会被浏览器的渲染优化机制直接合并，最终只有最后设置的translateX(500px)会被保留为元素的初始样式：要么红色块直接出现在500px位置没有动画，要么只能看到从0滑动到500px的效果。
你加的getComputedStyle读取操作在这个阶段不会生效，因为还没有前序的渲染状态可以用来计算重排，没法强制把1000px的状态同步进去。

方法2符合预期的原因 #

setTimeout的回调会在页面首次渲染完成之后才执行，这时候box的初始位置（0px）已经被浏览器记录到渲染快照里：

• 点击回调里先设置1000px，读取getComputedStyle会强制浏览器刷新渲染队列，把1000px的位置更新到当前渲染快照
• 后续设置500px时，浏览器能明确检测到transform从1000px到500px的状态变化，就会按照你定义的transition规则，触发从1000px滑动到500px的动画效果

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