animationstart/animationend不触发的首要原因是动画未真实启动；需检查样式变化是否可感知、@keyframes是否正确、animation-duration是否设置，并确保监听器兼容前缀、DOM就绪后绑定且能正确移除。
animationstart / animationend 事件不触发？先确认动画是否真实启动
浏览器根本不会派发 animationstart 或 animationend，除非动画确实“动起来了”——而它可能被静默跳过。这不是 Bug，是浏览器的性能优化行为。
- 检查动画是否有可感知的样式变化：比如
transform: translateX(0)→translateX(0)或opacity: 1→1这类“无变化”动画，会被直接忽略 - 用 DevTools 的 Styles 面板点开元素的
animation-name属性右侧动画图标，若显示 No keyframes found，说明@keyframes名称拼错、未加载或顺序靠后 - 确保
animation-duration已设置（哪怕只是0.01s），缺了它，动画就等于没声明
监听器绑定了却没反应？兼容性 + 绑定时机是关键
事件名带前缀、绑定太晚、元素还没挂载，三者任一出问题，监听就形同虚设。
- 必须同时监听所有主流前缀：
animationstart、webkitAnimationStart、msAnimationStart（Firefox 早就不需要前缀，但 Safari 和旧 Edge 仍要） - 不要用
el.onanimationstart = handler，改用addEventListener('animationstart', handler)，否则无法移除、易重复绑定 - 确保在 DOM 就绪后绑定：Vue 用
mounted，React 用useEffect(() => {...}, [])，原生 JS 用DOMContentLoaded或requestAnimationFrame确保元素已渲染
动画“闪一下”就结束？可能是被跳过，得加兜底逻辑
当 CSS 动画因初始不可见、display 被隐藏、或样式未及时生效而被跳过时，animationstart 不会触发，但 animationend 有时反而会立刻触发（模拟“瞬间完成”），造成回调错乱。
- 在添加动画类后，立刻用
getComputedStyle(el).animationName检查是否非空字符串，判断动画是否真在运行动态 - 对关键逻辑加 16ms 短延时兜底：
setTimeout(() => { /* 备用回调 */ }, 16)，比依赖事件更可靠 - 避免在同一个 JS 任务中反复
add→remove→add动画类；如需重播，先remove，再用setTimeout(..., 0)延迟重加
为什么 removeEventListener 失效？匿名函数和内存泄漏陷阱
用匿名函数绑定监听器，就等于放弃了移除能力——下次再绑，旧监听还在，导致回调执行多次甚至崩溃。
立即学习“前端免费学习笔记（深入）”；
- 监听器必须用具名函数或变量引用：
const handleEnd = () => { console.log('done'); }; el.addEventListener('animationend', handleEnd); // 后续可 el.removeEventListener('animationend', handleEnd); - 在元素销毁前主动解绑：Vue 的
beforeUnmount、React 的useEffect cleanup、或手动调用removeEventListener - 如果动画由 class 切换触发（如
animate__animated animate__bounce），注意 class 移除 ≠ 动画停止，监听器仍需独立管理
动画事件不是“一定有”，而是“有条件才发”。最常被忽略的，其实是“动画有没有真正开始”这个前提——其余都是锦上添花。
