javascript - setTimeout(() => ele.click()) 和 ele.click() 会导致不同的动画！那么，这与浏览器渲染或事件循环有关吗？

Question

#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)';
      
    });

    // method 1
    document.getElementById('btn').click();
    
    // method 2
    setTimeout(() => {
      btn.click();
    }, 1000)
    
</script>

语境：

Google：版本 92.0.4515.107（正式版本） (x86_64)

火狐：版本：90.0.2（64位）

在上面的代码中，方法一和方法二会在两个浏览器中导致不同的动画。为什么？我不是在说1s延迟

例子：

https://codesandbox.io/s/compassionate-tharp-ommki?file=/index.html 然后改代码，看看

结果：

方法1

方法2

Answer 1

如果您将所有代码包装成：

window.addEventListener('load', () => { ... });

关于事件。

它之所以有效，是因为在解析 css 并将其应用于元素之后代码将起作用。

当前代码在此之前触发。它会导致元素“跳跃”。