javascript - 如何让这种转换在 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，但根据我尝试过的这项工作：

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，您需要强制进行回流，如问题的回答中所述。访问诸如offsetWidth将强制回流的属性，因此这是比计时器更好的方法。