CSS动画结束事件监听方法

CSS动画原生支持`animationend`事件，可在动画自然结束、循环完成或中断恢复后精准触发，提供`animationName`、`elapsedTime`等关键信息用于逻辑判断和调试；它兼容主流现代浏览器，但需注意无限循环动画不会触发、延迟时间不计入`elapsedTime`，以及动态监听时及时清理事件避免内存泄漏——掌握这些细节，就能高效实现动画驱动的交互逻辑，如自动移除样式类、触发后续动作或状态重置。

可以，CSS 动画能通过 animationend 事件监听结束时机，这是浏览器原生支持的标准事件，无需额外库。

animationend 事件的基本用法

该事件在 CSS animation 完全播放完毕（包括正向播放、反向播放或循环中的最后一次）时触发。注意：它不适用于 transition（过渡），过渡对应的是 transitionend。

• 监听方式：使用 element.addEventListener('animationend', handler)
• 兼容性：现代浏览器（Chrome 43+、Firefox 16+、Safari 9+、Edge 12+）均支持
• 触发条件：动画自然结束、被取消（如 class 移除导致动画中断）、或通过 animation-play-state: paused 暂停后恢复并走完剩余时间，都可能触发——但强制中断（如移除 animation-name）不一定触发，需谨慎处理

获取关键动画信息

事件对象提供多个有用属性，帮助你判断具体是哪个动画结束：

• event.animationName：返回触发事件的 @keyframes 名称（字符串），可用于区分多个动画
• event.elapsedTime：动画实际运行的秒数（不含 delay），对调试和逻辑判断很实用
• event.pseudoElement：若动画发生在伪元素（如 ::before）上，该值为 ::before 或 ::after；否则为 ''

常见陷阱与应对建议

实际使用中容易忽略几个细节：

• 重复动画多次触发：如果设置了 animation-iteration-count: infinite，animationend 永远不会触发；若设为 3，则会在第 3 次结束后触发一次（不是每次迭代都触发）
• 延迟（animation-delay）不影响事件时机：animationend 的 elapsedTime 不包含 delay 时间，只算实际动画持续时间
• 避免内存泄漏：若动态添加/移除动画，建议在回调中手动 removeEventListener，或使用一次性监听（{ once: true }）
• 前缀兼容（已基本不用）：旧版 Safari/Chrome 曾用 webkitAnimationEnd，现在可直接用标准名

简单示例：动画结束后移除 class

常用于“播放一次 → 隐藏/重置元素”场景：

// HTML: 
Hello

// CSS: .slide-in { animation: slide 0.3s ease-out; }
//      @keyframes slide { from { transform: translateX(-100px); } to { transform: translateX(0); } }

const box = document.getElementById('box');
box.addEventListener('animationend', function(e) {
  if (e.animationName === 'slide') {
    box.classList.remove('slide-in');
  }
}, { once: true });

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。