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">）调用 <code>getAnimations()，只能拿到该节点自身的动画，不是其子节点的 —— 必须递归遍历所有子元素

  简单递归示例：

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  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) 一个个确认。