调用 Animation.play() 无反应，通常因动画未激活或未绑定到元素；需先通过 CSS 启用动画，再用 getAnimations() 获取实例并确保渲染完成。
Animation.play() 为什么调用后没反应
直接对 animation 对象调用 play() 没效果，大概率是因为该动画还没被“激活”——也就是还没绑定到元素上，或者处于 paused 状态但尚未被 JavaScript 获取到实例。CSS 动画必须先通过 @keyframes 定义、在元素上用 animation-name 启用，之后才能用 JS 获取并控制。
正确路径是：先让元素拥有一个正在运行（或至少已声明）的 CSS 动画，再用 getAnimations() 拿到 Animation 实例：
const el = document.querySelector('.box');
el.style.animation = 'slide 2s ease-in-out';
const anim = el.getAnimations().find(a => a.animationName === 'slide');
注意：getAnimations() 返回的是当前所有动画（含 CSS 和 Web Animations API 创建的），需手动过滤；若动画刚设置完就立即调用，可能因渲染时机未到而返回空数组，可加 requestAnimationFrame 延迟获取。
pause() 和 reverse() 的行为差异与限制
pause() 是安全可靠的：它把动画时间冻结在当前进度，后续调用 play() 会从中断处继续。但 reverse() 不是“倒放当前动画”，而是将 playbackRate 设为 -1 并重置播放方向 —— 这要求动画本身支持双向（比如 keyframes 中 0% → 100% 有明确定义），否则可能跳帧或卡在边界。
立即学习“前端免费学习笔记（深入）”；
-
reverse()会改变playbackRate，若之前设过非 1 的速率（如anim.playbackRate = 2），再reverse()后变成-2，不是“回到原速倒放” - 对已结束（
finished状态）的动画调用reverse()，会触发重新播放（从 100% 倒退到 0%），但若没重置currentTime，可能从末尾瞬间跳回起点 - 不要对处于
idle状态的动画调用reverse()，会抛错：InvalidStateError: Cannot reverse an idle animation
如何安全地切换播放/暂停/倒放状态
靠单次调用 play()/pause() 容易出状态混乱，尤其用户频繁点击按钮时。推荐统一用状态机逻辑管理：
let isPlaying = true;
function togglePlayback() {
const anim = el.getAnimations().find(a => a.animationName === 'slide');
if (!anim) return;
if (anim.playState === 'running') {
anim.pause();
isPlaying = false;
} else if (anim.playState === 'paused') {
anim.play();
isPlaying = true;
}
}
function toggleReverse() {
const anim = el.getAnimations().find(a => a.animationName === 'slide');
if (!anim || anim.playState === 'idle') return;
anim.reverse(); // 自动处理 play/pause 状态切换
}
关键点：
- 每次操作前检查
anim.playState（值为running/paused/idle/finished），不依赖外部布尔变量做判断 -
reverse()内部会自动调用play()，所以无需手动再play() - 如果想“倒放一次后停在起点”，需监听
anim.onfinish并在回调里anim.cancel()或anim.pause()
兼容性与替代方案：Safari 和旧版 Chrome 的坑
getAnimations() 在 Safari 16.4+ 和 Chrome 115+ 才稳定支持；更早版本（尤其是 Safari）可能返回空数组，即使动画明明在跑。此时只能降级处理：
- 用
el.style.animationPlayState = 'paused'控制播放状态（仅支持整体暂停/运行，无法 reverse） - 用 Web Animations API 重写动画：
el.animate(keyframes, options)，这样能 100% 控制play()/pause()/reverse() - 避免混合使用 CSS
animation和 JS 控制：比如 CSS 里写了animation-play-state: paused，JS 又调play()，不同浏览器解析顺序不一致，容易冲突
真正麻烦的不是方法不会用，而是你得同时判断动画是否已挂载、是否在运行、是否被其他样式覆盖、以及浏览器到底支不支持这个 API —— 这些状态几乎没法靠一次 if 搞定。
