重新启动/重置并重播过渡 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 最终会让浏览器有时间同时计算回流。您可以使用requestAnimationFrame 来实现同样的效果而不会闪烁。

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

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

Answer 2

试试这个：

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

我让它在click上运行，所以你需要点击它才能看到结果。

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