setTimeout repeats my animation

Question

How can I make the animation only happens once for every added div element?
https://code.sololearn.com/WnzTsid60Ly9/?ref=app

Answer 1

I suspect that the issue originates from how the DOM is re-rendered each time an element is added, causing the animation to restart

Using appendChild of a newly created div instead of concatanating as a string seems to do the trick

https://code.sololearn.com/WSa4148CYDf9/?ref=app

Answer 2

Burey Interesting; wrapping it. It also appears to work okay setting all the properties of the div:

https://code.sololearn.com/W4QETsbY5Y79/?ref=app

Answer 3

Kirk Schafer nice
Was wondering if that would work as well

Answer 4

KrOW Burey I think you're both on the right track.

I think once the text is rendered, Javascript has the object model ready and can automatically handle additional objects and their interactions -- but change the object-generating *text* and JS must run the entire "text file" again to learn what you changed and how it becomes the object model.

I hadn't thought this all the way through before, but there was a 3D Sphere code here that I optimized by converting the 100's of text injections to 100's of objects instead. IIRC, it really helped its load time and this feels like why.

Answer 5

Kirk Schafer another mystery unlocked 😮

Nice explanation

Answer 6

Thank you very much, guys :)

Answer 7

I think that its normal because set the innerHTML to another value its same like remove all childs and append new ones BUT at this point, all animation will restarts