Article From:


Why does child element animation start with the hidden display of parent elements?

Answer 0:


Descendant elements do not generate any boxes either; the element and its content are removed from the formatting structure entirely.
Please note that a display of ‘none’ does not create an invisible box; it creates no box at all.

I think that’s the reason. Elements and contents set to display:none will not be created. So every time you switch, it is recreated once, causing what the style will come into effect again.

Try this. The animation is deleted after the execution. Or delete animation styles at any other time.

el.addEventListener('animationend', function () {

Leave a Reply

Your email address will not be published. Required fields are marked *