快速点击后动画只播一次卡住，因浏览器对重复添加相同动画类有去重机制；需用 offsetWidth 强制重排或 element.animate() API 确保每次干净重播。
为什么快速点击后动画只播一次就卡住
浏览器对 CSS 动画的触发有“去重”机制：如果元素当前已拥有某个 animation 类，且该类对应的动画正在运行或刚结束（尤其设了 animation-fill-mode: forwards），再次 classList.add() 同一个类不会重启动画——它被当成“无变化”，直接跳过渲染更新。
这不是 bug，而是浏览器优化。但对按钮点击、通知弹窗这类需「每次点击都从头播」的场景，就会表现为：第一次正常，第二次起完全没反应。
- 常见错误模式：
el.classList.remove('animate'); el.classList.add('animate');—— 缺少强制重排，浏览器不认为样式“变了” - 更隐蔽的问题：
display: none期间动画被终止，再display: block不会自动续播 - 若用
animation-play-state: paused手动控制，忘记调anim.play()就永远停在那
用 offsetWidth 强制重排是最快生效的解法
在 JS 中添加动画类前，读取一个触发 layout 的属性（如 offsetWidth），能迫使浏览器同步计算当前样式，清空上一帧残留状态，让下一次 add() 被当作全新动画启动。
这是目前最轻量、兼容性最好、无需 polyfill 的方案：
立即学习“前端免费学习笔记（深入）”；
function triggerAnimation(el, className) {
el.classList.remove(className);
void el.offsetWidth; // 关键：强制重排
el.classList.add(className);
}- 不要用
getComputedStyle(el).opacity——它不一定触发 layout，尤其当 opacity 没变时 - 避免
el.style.display = 'none'; el.style.display = 'block';，开销大且可能闪屏 - 如果元素父级用了
contain: layout或content-visibility: hidden，offsetWidth可能失效，此时改用el.getAnimations().forEach(a => a.cancel())
用 pointer-events: none 配合动画禁用点击更可靠
比起等动画播完再开放点击，不如在动画开始时就用 CSS 锁定交互——既防重复点击，又不用 JS 管理状态。
定义一段仅控制指针事件的动画：
@keyframes disable-click {
from { pointer-events: all; }
to { pointer-events: none; }
}
.btn {
animation: disable-click 0.1s step-end forwards;
}-
step-end确保动画一结束立刻生效，不留空隙 - 动画时长设为
0.1s而非0s，避免被浏览器忽略 - 若需恢复点击，不能只靠动画结束，得额外加 class 或 JS 清除
animation属性，否则pointer-events会一直为none
复杂交互建议直接用 element.animate() API
当动画逻辑涉及暂停、重播、动态时长或需要监听完成事件时，CSS class 切换太脆弱。原生 animate() 返回的 Animation 对象可精确控制生命周期：
function playSlideIn(el) {
const anim = el.animate([
{ transform: 'translateY(20px)', opacity: 0 },
{ transform: 'translateY(0)', opacity: 1 }
], { duration: 300, fill: 'forwards' });
<p>// 可随时中断：anim.cancel()
// 可监听完成：anim.onfinish = () => { /<em> clean up </em>/ };
}- 多次调用
playSlideIn()不会冲突，每次都是新动画实例 - 不依赖 class 名，不怕命名污染或样式覆盖
- 注意：Safari 16.4+ 才支持
onfinish，旧版需用anim.addEventListener('finish', ...)
动画真正难的不是写出来，是让它在用户连点、滚动、切换标签页时依然稳定重播——关键不在“怎么动”，而在“怎么确保每次都能干净地动”。
