為什么父元素的顯示隱藏會(huì)影響子元素的keyframe動(dòng)畫?

鏈接

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.

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

試試這個(gè)吧，動(dòng)畫執(zhí)行完把樣式刪了?；蛘咴趧e的什么時(shí)機(jī)把動(dòng)畫樣式刪了。

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