点击动画不触发主因是dom未加载完成，需用domcontentloaded或script放body前；classlist.add()需配@keyframes和animation属性；连点问题应remove旧类并监听animationend清理；旧浏览器用feature detection适配webkitanimationend。
点击事件绑定后动画不触发？检查 addEventListener 是否在 DOM 加载完成之后执行
很多情况下动画“点了没反应”，根本原因不是插件写错了，而是 JS 脚本执行时目标按钮还没渲染出来。比如把 script 放在 里，又没加 DOMContentLoaded 或 defer。
- ✅ 正确做法：用
document.addEventListener('DOMContentLoaded', ...)包裹绑定逻辑 - ✅ 或者直接把
<script></script>放在前，确保 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，或者前一次动画还没结束，后一次就覆盖了状态，造成视觉/逻辑错乱。
