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

Javascript不是多线程的。
在执行js代码时，DOM没有发生任何事情。

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

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

Answer 2

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

您可以在代码返回后使用red添加setTimeout(function() { div.className += " red"; }, 10); 类。

.red

Answer 3

您可以设置超时以延迟添加setTimeout(function () { div.className += " red"; }, 0); 类。

My controller:
$class = new joinclass();
$class -> user_id = Auth::user()->id;
$class -> class_code = $request['class_code'];
$class -> save();

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

这样你就不必跟踪额外的课程。