How to use repetitive ionic CSS animations?


#1

Hi!
i would like to use ionic CSS animations like slide-in-right in a repetitive way.
Actually when i apply slide-in-right the first time, it works good and the animation run…
the problem come up when i want to apply the same animation again on the same element… it simply don’t play as it is already in the final position of the animation.

i’ve tried to remove the class and re-add it via js but without results as it seems browser don’t have time to reset the element position.

In my app i have a sort of infinite loop and when the user tap the next or previous button i want the current content to appear sliding from right or left so he can have a better experience.

Should i reset the position manually each time?

thanks


#2

Sorry for the stupid question, a quick google search solved my problem.
just for reference to who could have the same question, it turns out that triggering a browser reflow help getting the animation to restart.

//here remove class
element.offsetWidth = element.offsetWidth; //this trigger a reflow.
//here readd animation class