如何让这种转换在 webkit 中工作？答案

【问题标题】：How do I get this transition to work in webkit?如何让这种转换在 webkit 中工作？
【发布时间】：2012-07-27 00:08:29
【问题描述】：

我在使用样式表时取得了成功，但在 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';

【问题讨论】：

你创建了一个元素，但没有将它添加到 DOM 中
你的意思是这样... layout.messageBox.insertBefore(alert, layout.messageBox.firstChild);
阴影警报，未将其添加到 dom 中，过渡语法错误且不强制回流是我脑海中的问题
@tomwrong：那里的解决方案works for me
@tomwrong 设置了一个定时器来隐式地改变高度。如果您希望它在插入时正确设置动画，则需要强制回流（例如通过编写alert.offsetWidth;），然后更改要设置动画的属性。它不漂亮，但比 1 毫秒计时器漂亮得多。

标签： javascript webkit css-transitions

【解决方案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 之类的属性将强制进行重排，因此这是比计时器更好的方法。

【讨论】：

宾果游戏。好东西。所以超时允许渲染器有一些“呼吸”时间。我对吗？谢谢。
是的，我认为这与首先将线程交给渲染器有关。超时显然设置了一个在渲染器赶上之前不会触发的偶数
啊，好吧。 '回流'，知道的好词。让这个网络浏览器慢下来。
我个人更喜欢超时，但我认为它做同样的事情。它确实让我非常好奇为什么 myElement.offsetWidth=myElement.offsetWidth 有效。