javascript - css 过渡不是通过在同一函数中添加类来触发的

Question

当我点击窗口时，没有触发 CSS 过渡。

const div = document.querySelector('div');
window.onclick = function() {
  div.classList.add('fade');
  div.classList.add('in');
}

.fade {
  opacity: 0;
}

.fade.in {
  transition: opacity 2s linear;
  opacity: 1;
}

<div>aaaa</div>

然后我更改脚本，使用 setTimeout 添加第二个类 in，它起作用了。

const div = document.querySelector('div');
window.onclick = function() {
  div.classList.add('fade');
  setTimeout(function() {
    div.classList.add('in');
  });
}

.fade {
  opacity: 0;
}

.fade.in {
  transition: opacity 2s linear;
  opacity: 1;
}

<div>aaaa</div>

所以我认为，CSS 属性更改之间是否需要一段时间才能触发 CSS 转换？

所以我添加了添加类之间的时间。它也不起作用。

<script>
window.onclick = function(){
    div.classList.add('fade');
    for(var i=0;i<10000; i++){
        console.log(i);
    }
    div.classList.add('in'); 

}
</script>

为什么在同一个函数中更改类不能触发 css 转换？

Answer 1

如果我们更深入地研究 JavaScript V8 引擎的工作，可以分解执行，从而阐明当前的行为。 JavaScript 是单线程的，更准确地说

一个线程==一个调用栈==一次一件事

如上所示，setTimeout 是浏览器中的 WebAPI 的一部分。 WebAPI 的优先级低于作为核心 JavaScript 函数的“堆栈”方法。

如上所述 “这是关键部分:对元素的 classList 进行多次更改不会导致元素在每次更改时都重新绘制”

原因是“渲染队列”，它是 V8 架构的功能部分，如下所示:

渲染发生在“堆栈”方法执行之间。在所有堆栈为空之后，“事件循环”被触发，它提取传递给 WebAPI 的任何方法。这就是在第二种情况下，当脚本更改为使用 setTimeout 时，它起作用的原因。

关于这个的更详细的解释可以在 Philip Roberts 的博客上看到

https://youtu.be/8aGhZQkoFbQ