animationend未触发需先确认动画是否真实运行，检查animation-duration、元素状态及dom挂载；多动画时用set管理待完成名称；动态元素须确保渲染完成再监听；结束帧需手动设display:none。
animationend 事件根本没触发？先确认动画是否真在跑
很多情况下你以为动画播完了，其实浏览器压根没启动它。常见原因包括：animation-duration 是 0s、元素初始状态和 @keyframes 终态完全一致（比如都是 opacity: 1）、元素还没挂载到 DOM 或处于 display: none 状态。用 getComputedStyle(el).animationName 查一下返回值是不是 none，比盲等 animationend 更快定位问题。
监听器绑对了元素，但 event.animationName 总是错的
一个元素上同时启用多个动画（比如 animation: fade-in 0.3s, slide-up 0.4s），animationend 会触发两次，但 event.animationName 只返回最先结束的那个名字，无法区分谁真正走完了。更糟的是，如果动画中途被 class 移除中断，部分浏览器可能不触发事件。不要依赖这个字段做关键逻辑分支——用 Set 管理待完成动画名更可靠：
const pending = new Set(['fade-in', 'slide-up']);
element.addEventListener('animationend', (e) => {
pending.delete(e.animationName);
if (pending.size === 0) {
console.log('所有动画已结束');
}
}, { once: true });
动态插入的元素，animationend 死活不响应
JS 创建完 <img> 再立刻加监听器，大概率失败。因为 CSS 规则可能还没匹配上，或者浏览器样式计算尚未完成。必须确保元素已真实渲染且动画属性已生效。验证方式：在监听前加一行 console.log(getComputedStyle(image).animationName)，如果不是空字符串再绑定。另外，避免把动画写在父级选择器上（比如 .container img），而父容器用了 display: contents —— Firefox 下子元素会丢失动画上下文，animationend 直接静默。
动画播完了，但 display: none 不生效或闪一下
动画结束帧设了 opacity: 0 或 transform: scale(0)，不代表元素脱离布局流。想真正移除，必须在 animationend 回调里手动设 display: none。但要注意两点：一是别在事件回调里直接删 class，否则 animation-fill-mode: forwards 的终态样式会被回退；二是如果用了 animation-delay，event.elapsedTime 不含延迟时间，不能用来算总耗时。最稳的做法是监听后立刻清掉 animation 相关属性，再设 display: none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
