如何在Webkit中实现此转换？

Question

我在使用样式表时已经取得了成功，但在JavaScript中使用它并不适合我。我需要以编程方式执行此操作。希望你会意识到我正试图让div“成长”。

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

我不熟悉css3，但根据what I've tried这项工作：

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);​*/

感谢Esailija，您需要强制重排，如this answer of a question中所述。访问诸如offsetWidth之类的属性会强制重排，因此这比计时器更好。