Вызов на 0мс позже. Разница очевидна

Всем привет.

Столкнулся с проблемой вызова CSS3 свойства transition скриптом.

Код (Text):

1. .modal{
2.     position:fixed;
3.     width:100vw;
4.     height:100vh;
5.     top:0;
6.     left:0;
7.     z-index:1000;
8.     background:rgba(0,0,0,0.0);
9.     overflow-Y:scroll;
10.     pointer-events:none;
11.     opacity:0;
12.     transition:background 200ms linear;
13. }
14.     .modal_open{
15.         pointer-events:auto;
16.         opacity:1;
17.         background:rgba(0,0,0,0.3);
18.     }

Когда я делаю так:

Код (Text):

1.     var modal_ID = Math.random();
2.     var modal_EL = document.createElement("div");
3.     modal_EL.id = "modal"+modal_ID;
4.     modal_EL.className = "modal";
5.     modal_EL.innerHTML = '<div class="modal_window" id="modal_window'+modal_ID+'"><div class="modal_close" id="modal_close'+modal_ID+'">закрыть</div><div class="modal_content" id="modal_content'+modal_ID+'"></div></div>';
6.     document.body.appendChild(modal_EL);
7.    
8.      modal_EL.className = "modal modal_open";

создается и встраивается в DOM новый DIV, но, как положено в CSS не происходит плавного изменения цвета.

Однако, если заменить последнюю строку скрипта на

Код (Text):

1.     setTimeout(function(){
2.         $("modal"+modal_ID).className = "modal modal_open";
3.     },1);

или даже на это

Код (Text):

1.     setTimeout(function(){
2.         $("modal"+modal_ID).className = "modal modal_open";
3.     },0);

то transition срабатывает как положено!

Почему так происходит? Ведь я присваиваю новый класс диву уже после его создания и размещения на странице.
А разница в вызове инструкции в 0мс дает нужный эффект....

 

нет конечно!!
Запихал в сеттаймофт.. и глаз не режет и работает как надо

 

function $(id){
return document.getElementById(id) || false;
}

 

Это у меня в коде мною же прописано в файлике общих скриптов.