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 a div, а затем назначить class, чтобы он анимировал.

Что я получил вместо:

Див уже добавляется красный, с без анимации не происходит.

Есть ли обходной путь?

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

Когда вы делаете изменения DOM в Javascript, все они отображаются одновременно, когда они возвращаются в основной цикл событий. Промежуточные значения не видны.

Вы можете использовать setTimeout(), чтобы добавить класс red после возврата кода.

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

Answer 3

Вы можете установить таймаут, чтобы отложить добавление класса .red.

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

Answer 4

Javascript не является многопоточным.
Ничего не случилось с DOM, а js-код выполнен.

Вы должны отложить исполнение до событийного цикла для анимации:

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