+ 6
setTimeout repeats my animation
How can I make the animation only happens once for every added div element? https://code.sololearn.com/WnzTsid60Ly9/?ref=app
7 Answers
+ 8
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
+ 5
Burey Interesting; wrapping it. It also appears to work okay setting all the properties of the div:
https://code.sololearn.com/W4QETsbY5Y79/?ref=app
+ 5
Kirk Schafer nice
Was wondering if that would work as well
+ 5
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.
+ 5
Kirk Schafer another mystery unlocked đź
Nice explanation
+ 4
Thank you very much, guys :)
+ 2
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