Element.getAnimations()返回一个Animation实例数组，包含当前元素上通过CSS动画、CSS过渡或JavaScript animate()创建且处于活跃状态的动画；不包含已暂停、完成或取消的动画，子元素动画需单独调用该方法获取。
Element.getAnimations 返回的是什么
Element.getAnimations() 返回一个 Animation 实例数组，每个实例对应当前元素上**通过 CSS 动画（@keyframes）、CSS 过渡（transition）或 JavaScript animate() 创建的、尚未结束且处于活跃状态的动画**。它不包含已暂停但未结束、或已自然完成/被取消的动画（除非显式调用 commitStyles() 或保留 fill-mode）。
在 HTML 编辑器场景中（比如基于 contenteditable 的富文本编辑器），你需要明确：只有直接挂载在目标元素上的动画才会被返回；子元素的动画不会自动“冒泡”上来，必须单独调用其 getAnimations()。
如何正确获取编辑器内所有正在运行的动画
编辑器内容通常是动态插入的，DOM 变化频繁，而 getAnimations() 是快照式 API —— 它只反映调用时刻的状态。所以不能只查一次，得结合实际需求选择时机：
- 若想检查某次用户操作（如粘贴、格式化）后触发了哪些动画，应在 DOM 更新完成后再调用，例如用
requestAnimationFrame或MutationObserver监听完渲染 - 若要实时监控，需定时轮询（不推荐高频）或监听
animationstart/transitionrun事件并维护一个映射表 - 对
contenteditable根节点（如<div contenteditable="true">）调用getAnimations()，只能拿到该节点自身的动画，不是其子节点的 —— 必须递归遍历所有子元素
简单递归示例：
立即学习“前端免费学习笔记（深入）”；
function getAllRunningAnimations(root) {
const animations = Array.from(root.getAnimations());
root.querySelectorAll('*').forEach(el => {
animations.push(...Array.from(el.getAnimations()));
});
return animations;
}
常见误判：为什么 getAnimations() 总是空数组
这是最常遇到的问题，原因通常不是 API 失效，而是动画根本没“活起来”：
- CSS 动画未触发：比如
animation-name写错、animation-duration: 0s、或元素初始状态与@keyframes第一帧完全一致导致跳过启动 - 过渡未发生：修改的属性不在
transition-property列表里，或样式变更未触发重排/重绘（例如只改了transform但用了will-change: auto） - JavaScript 动画被立即终止：调用
el.animate(...).cancel()后再查，就没了；或者动画刚创建就被finish()强制结束 - 作用域问题：编辑器 iframe 内的内容，父页面 JS 无法跨 origin 访问其 DOM，
getAnimations()会静默失败或返回空
兼容性与性能注意点
Element.getAnimations() 在 Chrome 63+、Firefox 73+、Safari 16.4+ 支持，Edge 基于 Chromium 后也支持。IE 完全不支持，无 polyfill 可用。
性能方面：getAnimations() 是同步操作，但遍历深层嵌套的编辑器 DOM（尤其含大量 inline 元素）可能产生可观开销：
- 避免在每帧
requestAnimationFrame中调用 —— 即使只查根节点，也建议节流或仅在必要时（如用户点击“暂停动画”按钮）触发 - 如果只是想控制动画，优先使用
document.getAnimations()获取全局所有动画，再过滤出属于编辑器区域的（用effect.target判定），比逐个元素遍历更高效 - 注意
Animation实例持有对 DOM 节点的引用，长期缓存需小心内存泄漏，尤其是编辑器频繁增删节点时
真正难的不是调用这个方法，而是判断“哪些动画该算作编辑器的一部分”——effect.target 可能指向 shadow DOM 内部节点、伪元素（不支持），或已被移出 DOM 但动画尚未 cleanup 的残留实例。这些边界情况，调试时得靠 console.log(anim.effect.target) 一个个确认。
