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，应该可以制作漂亮的彩色动画。我想要append一个div，然后分配一个class，这样它就会有动画。

我得到了什么而不是

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

有什么解决办法吗？

Answer 1

你试过用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);

这样，您不一定需要跟踪一个额外的类。

Answer 2

Javascript不是多线程。

在执行js代码时，DOM没有发生任何事情。

对于动画，应该将执行延迟到事件循环：

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

Answer 3

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

可以在代码返回后使用setTimeout()添加red类。

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