Javascript - CSS-переход на динамически созданный элемент

Question

Я создаю элемент с (чистым!) Javascript.

var dynamic_gallery = document.createElement("li"); 

Теперь я назначаю ему класс, который дает элемент a {...; высота: 0; переходная продолжительность: .4s; }

dynamic_gallery.className = "gallery-container"; 

Сразу после этого, я добавить еще один класс с {высота: 400px важно;}

dynamic_gallery.className += " gallery-exp"; 

Из моего понимания, элемент должен быть создан невидимый и сразу же Получать изменение высоты и! плавно расти до 400px.
Так почему же он все равно будет отображаться мгновенно на полной высоте?

Answer 1

CSS3 событие перехода задержки будет срабатывать для элементов после того, как жить. Здесь вы установили высоту в 0, но элемент «li» не находится в DOM (поэтому его не живут).

поэтому после установки высоты до 0px заставьте ее жить. т.е.

document.body.appendChild(dynamic_gallery) 

«Ли» жив сейчас, и переход-продолжительность: .4s событие было зарегистрировано.

Теперь увеличьте высоту до 400 пикселей, присвоив класс, dynamic_gallery.className + = "gallery-exp";

Вы увидите гладкую анимацию.

EDIT: большинству браузеров требуется время, чтобы сделать элемент живым, поэтому нам нужен тайм-аут в 0 секунд, чтобы он работал.

, следовательно, он должен быть

setTimeout(function(){ 
    dyna_gallery.className += " gallery-exp";},0) 

вместо

dyna_gallery.className += " gallery-exp"; 

Fiddle: http://jsfiddle.net/zYLmw/

Answer 2

Почему он должен расти «плавно»?

Все изменения DOM (включая CSS), которые вы выполняете в своем сценарии, не отображаются до тех пор, пока ваш код не закончится.

Если вы хотите изменить, чтобы быть видимыми, вы должны заставить свой код до конца, например, с помощью setTimeout:

var dynamic_gallery = document.createElement("li"); 
dynamic_gallery.className = "gallery-container"; 
... appending 
setTimeout(function(){ 
    dynamic_gallery.className += " gallery-exp"; 
}, 2000); // wait 2 seconds before adding the class 

Но:

• это не сделает ее гладкой вообще. Для этого вам придется называть много изменений (изменяя высоту элементов, а не класс), а не только один
• с использованием !important почти всегда является признаком плохого дизайна. Вот.

Вот пример анимации высоты вашего элемента из 0 в 400 пикс:

(function grow(){ 
    var h = (parseInt(dynamic_gallery.style.height)||0)+1; 
    dynamic_gallery.style.height = h+'px'; 
    if (h<400) setTimeout(grow, 30); 
})(); 

Demonstration