為什么父元素的顯示隱藏會影響子元素的keyframe動畫?

鏈接

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.

我覺得是這個原因吧。設(shè)置為display:none的元素及內(nèi)容不會被創(chuàng)建。所以每次切換的時候就是重新創(chuàng)建了一次，導致樣式什么的會重新生效。

試試這個吧，動畫執(zhí)行完把樣式刪了?；蛘咴趧e的什么時機把動畫樣式刪了。

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