Matrix Matrix - 6 months ago 28
CSS Question

restart/reset and replay a transition css?

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

I think the code are executed in same frame of navigator and by optimisation, it doesn't change nothing...

exemple : https://jsfiddle.net/f0s8a8jp/2/

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


The only solution I found for this moment (not realy clean for me), it's use setTimeout beetween reset properties and applying new transition, like : https://jsfiddle.net/f0s8a8jp/3/

Better idea are welcome ?!

Answer

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 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.

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

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