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;}

我想要的：

将 "red" class 分配给 div，应该可以制作漂亮的彩色动画。我想 append 一个 div，然后分配一个 class，这样它就会有动画。

我得到了什么:

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

有什么解决方法吗？

Answer 1

当您在 Javascript 中进行 DOM 更改时，它们会在 returns 到主事件循环时立即全部呈现。看不到中间值。

您可以使用setTimeout()在代码returns后添加redclass。

setTimeout(function() {
    div.className += " red";
}, 10);

Answer 2

您可以设置超时来延迟添加 .red class。

setTimeout(function () {
    div.className += " red";
}, 0);

Answer 3

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

您应该延迟执行动画的事件循环：

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

Answer 4

您尝试过使用 css 动画吗？

我建议这样：

JSBIN

// css

div {
  animation: toRed 2s ease-out;
  animation-fill-mode: forwards;
   width: 200px; height: 200px;
}

@keyframes toRed {
    0%      { background-color: blue; }
    100%    { background-color: red; }
}

// javascript

var wrapper = document.getElementById("wrapper");
var div = document.createElement("div");
wrapper.appendChild(div);

这样您就不必跟踪额外的 class。

appendChild 很慢

appendChild is slow

html

javascript

appendchild