为何直接触发ele.click()与setTimeout内触发click会产生不同的CSS过渡动画效果

#box {
 width: 100px;
 height: 100px;
 background-color: red;
}

<button id="btn">click</button>
<div id="box"></div>
<script>
    const box = document.getElementById('box');
    const btn = document.getElementById('btn');

    document.getElementById('btn').addEventListener('click', function() {
      box.style.transform = 'translateX(1000px)';
      box.style.transition = 'transform 1s ease-in-out';

      getComputedStyle(box).transform;
      box.style.transform = 'translateX(500px)';
      
    });

    // 方法1：同步触发点击
    document.getElementById('btn').click();
    
    // 方法2：setTimeout回调中触发点击
    setTimeout(() => {
      btn.click();
    }, 1000)
</script>

Chrome: 版本 92.0.4515.107（正式版本） (x86_64)
Firefox: 版本: 90.0.2 (64 位)

这个差异完全和浏览器渲染机制、事件循环逻辑相关，核心是两次click触发时页面所处的渲染阶段不同，导致transition过渡的触发条件不一致：

transition的生效前提 #

transition要播放过渡动画，必须满足：浏览器已经记录了元素属性的一个「已渲染的旧状态」，之后属性发生修改，新状态和旧状态存在差异，浏览器才会用配置的过渡规则从旧状态动画到新状态。

两种触发方式的时机差异 #

• 方法1：同步调用btn.click()
  这段代码是在script标签解析阶段同步执行的，此时浏览器刚完成DOM树构建，还没有执行首次页面渲染，box的初始状态（translateX(0)）还没有被绘制到屏幕上，没有被记录为有效旧状态。
  点击事件执行时，哪怕先把transform设为1000px、调用getComputedStyle强制计算样式，再改成500px，这些修改都发生在首次渲染之前。浏览器最终首次绘制时只会取最后的样式值（500px），不会触发过渡，看到的就是box直接出现在500px的位置，没有动画。
• 方法2：setTimeout回调中调用btn.click()
  setTimeout属于宏任务，回调执行时，页面已经完成了首次渲染，box的初始状态translateX(0)已经被绘制到屏幕，是被浏览器记录的有效旧状态。
  点击事件执行时：
  1. 把transform设为1000px
  2. getComputedStyle强制浏览器同步计算所有 pending 的样式修改，把1000px标记为当前的最新有效状态
  3. 再把transform改成500px
     此时浏览器检测到transform属性从已记录的1000px变成了500px，就会触发transition规则，播放从1000px滑动到500px的动画。

和事件循环、渲染流水线的关联 #

浏览器的事件循环执行逻辑是：每执行完一个宏任务 → 清空所有待执行的微任务 → 进入渲染流水线（样式计算、布局、绘制）。
方法1的click执行在DOM解析的宏任务中，所有样式修改都发生在首次渲染流水线执行之前，自然不会产生状态差触发过渡；而setTimeout的回调是独立的宏任务，执行时上一轮的渲染已经完成，样式修改就会产生可被检测到的状态差，触发过渡动画。

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