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>

背景:

谷歌:版本92.0.4515.107(正式版本)(x86_64)

Firefox: 10.3969: 90.0.2(64‰)

在上面的代码中，方法1和方法2将在两个浏览器中显示不同的动画。为什么?我说的不是1s延迟

例子:

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

结果:

method1

method2

Answer 1

方法#1的代码可以工作，如果你把所有的代码包装成:

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

有关的事件。

它可以工作，因为代码将在css被解析并应用到元素后工作。

当前代码在此之前触发。它会导致"跳转"。