重新启动/重置和重放转换css？ [英] restart/reset and replay a transition css?

问题描述

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

I need to replay a css transition using javascript. When I reset css style of my div and apply the new transition, nothing happens...

我认为两个代码在同一个执行帧中执行，通过优化，它不会改变任何东西...

I think both code are executed in the same execution frame and by optimisation, it doesn't change anything...

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

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

我发现的唯一解决方案（不是真的干净我），是使用setTimeout beetween属性重置和应用新的转换： https://jsfiddle.net/f0s8a8jp/3/

The only solution I found for the moment (not realy clean for me), is to use setTimeout beetween the properties reset and the application of new transition : https://jsfiddle.net/f0s8a8jp/3/

更好的想法是否受欢迎？

Better idea is welcome?!

推荐答案

对元素的计算维度。设置CSS属性不会计算它。所以，设置和回溯属性就像让它不变。当浏览器需要重排元素时计算。

The transition will apply on the computed dimension of the element. Setting the CSS property does not compute it. So, setting forth and back the property is like letting it unchanged. It's computed when the browser need to reflow the element.

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

setTimeout will eventually let the time to the browser to compute a reflow in the meanwhile. You could use requestAnimationFrame to achieve the same without flickering.

另一个黑客在于强迫浏览器改变CSS属性，使用 test [0] .offsetWidth; 为例。
然后正确执行转换： https://jsfiddle.net/f0s8a8jp/9/

Another hack consists in forcing the browser to reflow right after altering the CSS properties, using test[0].offsetWidth; for instance. The transition is then performed correctly: https://jsfiddle.net/f0s8a8jp/9/

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

A more in-depth discussion about reflow (and repaint) can be found here: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

这篇关于重新启动/重置和重放转换css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！