animation issue
Hey, i'd like a button that when pressed plays an animation on another element. What i have works however i can only play the animation once, when i press the button again it doesn't play. Why is this? Thanks in advance.
https://codepen.io/deerCabin/pen/qBzbqJK
11 Replies
before you start the animation, you have to reset it
i set it to paused before running and it still doesn't work?
here's a quick way to reset an animation:
1- set
style.animation to a name that doesnt exist
2- remove the class/attribute that has the animation
3- read the offsetHeight of the element
4- set style.animation to an empty string, for the element
5- re-add the class/attribute
you can try to skip step 2 and 5, and see if it still works, but i recommend it anywaysthat seems to be doing it, i updated the codepen, do you mean like that?
i would have never expected that you'd have to read an offset height or set it to something that doesn't exist haha, could you please explain the benefits of that?
no beneficts
just forces a reflow on the browser
it's dumb stupid bs you need to do
basically, you're telling to the browser "yo, update this element"
browsers dont like doing unnecessary work, because that causes performance issues
imagine if it was still trying to calculate the final state of the animation, after it has finished and was just sitting idle
oh okay i see, with offsetHeight, is that the only one it works with?
no, anything that forces a reflow works
but reading the
offetWidth and offsetHeight is the easiestoh, i'm a bit new to js, what's a browser reflow and what type of things force/cause it?
a reflow is when the browser has to re-calculate all the sizes and position of the element and all children
this is needed because the animation sticks the element to its final state
imagine thay you move it to the left by 150px
when it finishes animating, it stays at 150px away
when you change the play state, nothing happens because it already is at 150px - the final state
when you simply remove the animation, it doesnt do a reflow, which means that it will still stay in the final state, for performance reasons, as far as i understand
the reflow forces the element to recalculate what it didnt before, resetting it those 150px
it is possible that i missed a detail here and there, but dont worry much about it
reflows happen, but dont happen always
Ohh that makes sense, that explains why it only played once, I appreciate the help
you're welcome