为什么父元素的显示隐藏会影响子元素的keyframe动画?

Question

复现

为什么子元素动画随着父元素的显示隐藏而出发?

Answer 1

链接

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.

我觉得是这个原因吧。设置为display:none的元素及内容不会被创建。所以每次切换的时候就是重新创建了一次，导致样式什么的会重新生效。

---

试试这个吧，动画执行完把样式删了。或者在别的什么时机把动画样式删了。

el.addEventListener('animationend', function () {
  el.classList.remove('zoom')
})