javascript - 重新启动/重置并重播过渡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 实现相同的效果而不会闪烁。

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

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