CSS-transition on elements added dynamically via JavaScript
css, dom, html, javascript
Solution
CSS3 transition-delay event will be fired for elements after being live. Here you have set height to 0 but still "li" element is not in DOM(so its not live).
so after assigining height to 0px make it live. ie
document.body.appendChild(dynamic_gallery)
The "li" is live now,and transition-duration:.4s event has been registered.
Now increase the height to 400px by assigning the class, dynamic_gallery.className += " gallery-exp";
You will see smooth animation.
EDIT:Most browser needs time to make element live so we need a timeout of 0 seconds to make it work.
hence it should be
setTimeout(function(){
dyna_gallery.className += " gallery-exp";},0)
instead of
dyna_gallery.className += " gallery-exp";
Fiddle: http://jsfiddle.net/zYLmw/
Problem
I create an element with like this: ``` var dynamic_gallery = document.createElement("li"); ``` Now I assign a class to it, which gives the element style `a { height:0;transition-duration:.4s; }` ``` dynamic_gallery.className = "gallery-container"; ``` Right after this step, I add another class with style `{ height:400px !important; }` ``` dynamic_gallery.className += " gallery-exp"; ``` From my understanding, the element should be created invisible and immediately recieve a change in height and grow smoothly to 400px. So why will it still appear instantly in full height?