+5

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

10/19/2018 10:11:22 AM

Fernando Moceces

7 Answers

New Answer

+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

+3

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