Javascript css转换不是通过在同一个函数中添加类触发的

当我点击窗口时，CSS转换不会触发

constdiv=document.querySelector（'div'）；
window.onclick=function（）{
div.classList.add（'fade'）；
div.classList.add（'in'）；
}

.fade{
不透明度：0；
}
.淡入{
过渡：线性；
不透明度：1；
}

---

aaaa

必须使用不透明度的初始状态（在本例中为零）为

div

定义转换

constdiv=document.querySelector（'div'）；
window.onclick=function（）{
div.classList.add（'fade'）；
div.classList.add（'in'）；
}

div{
不透明度：0；
过渡：线性；
}
.fade{}
.淡入{
不透明度：1；
}

---

aaaa

在第一个示例中，在重新绘制元素之前，您将同时向元素添加两个类。不透明度的初始值为1，

.fade.in

的不透明度也为1，因此元素的不透明度没有变化

这是关键部分：对元素的类列表进行多次更改不会导致元素随着每次更改而重新绘制

---

延迟添加“in”类意味着浏览器首先必须将元素渲染为简单的

.fade

，不透明度为0。超时后，浏览器意识到它需要将元素的不透明度从0转换为1，因此它会执行必要的插值。

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

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

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

如上所述“这是至关重要的一部分：对元素的类列表进行多次更改不会导致元素在每次更改时重新绘制”

原因是“渲染队列”，它是V8体系结构的功能部分，如下所示：

渲染在“堆栈”方法执行之间进行。在所有堆栈都为空之后，将触发“事件循环”，并提取传递给WebAPI的任何方法。这就是原因，在第二个场景中，当脚本更改为使用setTimeout时，它可以工作

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