Question

I’ve have had success when using style sheets, but doing it in JavaScript isn’t working for me. I need to do this programatically. Hopefully you will have realised that I’m trying to make the div ‘grow’.

var myElement = document.createElement('div');
myElement.style.height = '0px';
myElement.style.padding = '0px';
myElement.style.webkitTransition = '2s'; /* problem with this line ? */
myElement.style.height = '200px';

Answer 1

I am not familiar with css3, but according to what I’ve tried this work:

var myElement = document.createElement('div');
myElement.style.height = '0px';
myElement.style.padding = '0px';
myElement.style.height = '0';
myElement.style.webkitTransition = '2s';
// Append the element to DOM
document.getElementById("a").appendChild(myElement);
// Alter the height after forcing a reflow
myElement.offsetWidth=myElement.offsetWidth;
myElement.style.height = '200px';​
/*// Alter the height later
setTimeout(function() {
    myElement.style.height = '200px';
}, 1);​*/

Thanks to Esailija, you need to force a reflow, as stated in this answer of a question. Accessing properties such as offsetWidth will force a reflow, so that’s a better way than a timer.