javascript - appendChild 很慢

Question

Javascript:

var wrapper = document.getElementById("wrapper");
var div = document.createElement("div");
wrapper.appendChild(div);
div.className += " red"; // this should happened after appendChild()

CSS:

div{color:blue; transition: all 2s;}
div.red{color:red;}

我想要的:

将“红色”class 分配给 div，应该可以制作漂亮的彩色动画。我想附加一个div，然后分配一个类，这样它就会有动画。

我得到了什么:

Div 已经附加了红色，没有动画进行。

有什么解决方法吗？

Answer 1

Javascript 不是多线程的。
当 js 代码执行时，DOM 没有任何反应。

你应该延迟执行动画的事件循环:

setTimeout(function() {
  div.className += " red";
}, 0/*or other amount of ms*/);