我需要使用 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/
欢迎提出更好的想法?!
最佳答案
过渡将应用于元素的计算维度。设置 CSS 属性不会计算它。因此,设置和返回属性就像让它保持不变。它是在浏览器需要重排元素时计算的。
setTimeout
最终会将时间交给浏览器,同时计算回流。您可以使用 requestAnimationFrame
实现相同的效果而不会闪烁。
另一个技巧是强制浏览器在更改 CSS 属性后立即重排,例如使用 test[0].offsetWidth;
。
然后正确执行转换:https://jsfiddle.net/f0s8a8jp/9/
有关回流(和重绘)的更深入讨论可在此处找到:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/
关于javascript - 重新启动/重置并重播过渡CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37439605/