重新启动/重置并重播过渡CSS？

Question

我需要使用javascript重播CSS转换。 当我重设div的CSS样式并应用新的过渡时，什么也没有发生...

我认为这两个代码都在同一执行框架中执行，并且经过优化，它不会改变任何内容...

范例： https : //jsfiddle.net/f0s8a8jp/2/

test.css({transition: 'none', height: '0px'});
test.css({transition: 'height 1s linear', height: '100px'});

我目前发现的唯一解决方案（对我来说不是很干净），是在属性重置和新过渡的应用之间使用setTimeout： https : //jsfiddle.net/f0s8a8jp/3/

欢迎更好的主意？！

Answer 1

过渡将应用于元素的计算尺寸。 设置CSS属性不会对其进行计算。 因此，来回设置属性就像让它不变。 它是在浏览器需要重排元素时计算的。

setTimeout最终会将时间setTimeout浏览器，同时计算回流。 您可以使用requestAnimationFrame实现相同效果而不会闪烁。

另一test[0].offsetWidth;在更改CSS属性后使用test[0].offsetWidth;强制浏览test[0].offsetWidth; 例如。 然后可以正确执行转换： https : //jsfiddle.net/f0s8a8jp/9/

可以在以下位置找到有关回流（和重绘）的更深入的讨论： http : //www.phpied.com/rendering-repaint-reflowrelayout-restyle/

Answer 2

尝试这个：

https://jsfiddle.net/f0s8a8jp/4/

我让它在click起作用，因此您需要单击它才能查看结果。

我真正改变的唯一一件事就是代码的顺序。