动画常驻是因为 requestAnimationFrame 没被 cancelAnimationFrame 清除，它持续触发回调直至显式取消；需保存 ID 并在组件卸载、页面隐藏等时机调用 cancelAnimationFrame 清理。
动画常驻是因为 requestAnimationFrame 没被 cancel
HTML5 动画常驻，绝大多数情况是 requestAnimationFrame 启动后没调用 cancelAnimationFrame 清除。它不像 setTimeout 那样自动结束，一旦开始就会持续触发回调，哪怕元素已移出视口、DOM 已被移除、页面切换到后台——只要回调函数还存在且未被取消，浏览器就继续调度帧。
常见误操作包括：
- 在组件卸载（如 React
useEffect清理函数、VuebeforeUnmount）中忘记调用cancelAnimationFrame - 把
requestAnimationFrameID 存在局部变量里，但作用域外无法访问，导致无法清除 - 重复调用动画启动逻辑，生成多个 ID，但只保存了最后一个，其余“失控”
- 在事件监听器中反复注册动画循环，却没做防重或清理
如何安全启动并清除 requestAnimationFrame 循环
关键在于：每次调用 requestAnimationFrame 返回的 ID 必须被保留，并在适当时机传给 cancelAnimationFrame。推荐封装成可控制的结构：
let animationId = null;
function animate() {
// 动画逻辑，例如更新 transform 或 opacity
if (shouldContinue) {
animationId = requestAnimationFrame(animate);
}
}
// 启动
animationId = requestAnimationFrame(animate);
// 清除（务必在组件销毁、暂停、条件不满足时调用）
if (animationId !== null) {
cancelAnimationFrame(animationId);
animationId = null;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
-
animationId必须是跨调用可访问的变量（闭包、实例属性、ref 等），不能是函数内临时变量 - 清除前判空，避免重复调用
cancelAnimationFrame报InvalidArgument警告 - 若使用类或 Hook，建议将
animationId存在ref（React）或instance property（class）中
动画进入后台/标签页失焦时要不要停？
要停。浏览器在非活跃标签页中会大幅降低 requestAnimationFrame 的触发频率（甚至冻结），但回调仍可能在切回时集中执行，造成卡顿或状态错乱。更稳妥的做法是监听页面可见性变化：
function handleVisibilityChange() {
if (document.hidden) {
if (animationId !== null) {
cancelAnimationFrame(animationId);
animationId = null;
}
} else {
if (animationId === null && shouldContinue) {
animationId = requestAnimationFrame(animate);
}
}
}
document.addEventListener('visibilitychange', handleVisibilityChange);
补充说明：
-
document.hidden是标准 API，兼容所有现代浏览器 - 不要依赖
blur/focus，它们不反映标签页可见性 - 某些复杂动画（如音频同步、物理模拟）需额外暂停内部计时器，仅停 rAF 不够
用 CSS 动画替代 JS 动画能避免常驻问题吗？
能，但有前提。CSS @keyframes + animation 属性本身无常驻风险——动画播完即停，不主动触发就不会持续消耗资源。但要注意这些陷阱：
- 写了
animation-iteration-count: infinite却没在合适时机用 JS 移除animation类或重置animation-play-state - 用
animation-play-state: paused暂停后，忘记恢复或未正确清理，导致 DOM 上残留无效动画状态 - 通过
element.style.animation = '…'动态设置动画，但后续没清空该内联样式，下次复用时可能意外触发 - CSS 动画结束后未监听
animationend事件做收尾，比如未还原transform或释放占位元素
真正省心的方式是：用 CSS 做声明式动画，用 JS 控制开关（增删 class），并在 animationend 中清理或移交状态。JS 只负责“触发”和“收尾”，不维持循环。
常驻动画不是浏览器 bug，是资源管理漏掉了那句 cancelAnimationFrame。最易忽略的，往往是那个本该在 else 分支或 finally 块里执行的清除逻辑。
