点击动画不触发主因是DOM未加载完成，需用DOMContentLoaded或script放body前；classList.add()需配@keyframes和animation属性；连点问题应remove旧类并监听animationend清理；旧浏览器用feature detection适配webkitAnimationEnd。
点击事件绑定后动画不触发？检查 addEventListener 是否在 DOM 加载完成之后执行
很多情况下动画“点了没反应”，根本原因不是插件写错了，而是 JS 脚本执行时目标按钮还没渲染出来。比如把 script 放在 里，又没加 DOMContentLoaded 或 defer。
- ✅ 正确做法：用
document.addEventListener('DOMContentLoaded', ...)包裹绑定逻辑 - ✅ 或者直接把
放在前，确保 DOM 已就绪 - ❌ 错误示范：在
中直接调用document.querySelector('.like-btn').addEventListener(...)—— 此时返回null，后续一切失效
classList.add() 触发动画但闪一下就消失？记得配 CSS @keyframes 和过渡类名
JS 只负责“加类”，动画效果全靠 CSS 驱动。常见问题是只写了 like-animation 类，但没定义它对应的帧或持续时间，导致浏览器瞬间完成、肉眼不可见。
- ✅ 必须定义一个带
animation属性的类，例如：.like-trigger { animation: like-bounce 0.4s ease-out; } - ✅ 对应的
@keyframes like-bounce至少包含from和to，且不能只改display（它不可动画） - ⚠️ 注意：如果用
transform+opacity做动画，别漏掉will-change: transform, opacity;提升性能，尤其在移动端
点赞数 +1 后立即再点无效？避免重复绑定或未清理临时类名
用户快速连点两次，可能让同一个元素上叠加多个 like-trigger，或者前一次动画还没结束，后一次就覆盖了状态，造成视觉/逻辑错乱。
- ✅ 绑定事件时用
once: true选项，或手动在动画结束回调里removeEventListener - ✅ 添加类前先
element.classList.remove('like-trigger')，防止重复添加阻塞重播 - ✅ 监听
animationend事件清理类名，而不是靠定时器硬等 —— 不同设备动画时长可能有细微差异 - ❌ 别用
setTimeout等固定毫秒数来移除类，兼容性差且易出错
IE11 或旧版 Safari 不支持 animationend？用 webkitAnimationEnd 兜底但慎用前缀
不是所有老浏览器都识别标准事件名，但盲目加一堆前缀反而引发冲突。关键是只补真正缺失的，且优先检测原生支持。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐写法：
const animEnd = 'onanimationend' in document.createElement('div') ? 'animationend' : 'webkitAnimationEnd'; - ✅ 绑定时统一用这个变量：
el.addEventListener(animEnd, handler) - ⚠️ 注意：iOS animation-fill-mode: forwards 支持不稳定，如果动画结束后要保持最终态，建议 JS 补一手
style.transform = 'scale(1.2)'
