要获取所有带有动画效果的节点，应优先使用 document.getAnimations() 筛选 playState 为 'running' 的动画，并提取其 effect.target，去重后过滤非 Element 类型；静态扫描仅能识别动画定义，无法确认是否正在播放。
要获取所有带有动画效果的节点，核心思路是检查元素是否正在运行 CSS 动画或过渡（transition），因为 JavaScript 本身不“标记”哪些元素有动画，而是通过浏览器渲染引擎的状态来判断。
检查 getComputedStyle 中的动画属性
最常用且可靠的方式是读取元素的 animation-name 和 transition-property，再结合当前实际播放状态：
-
animation-name不为none，且animation-play-state为running，说明该元素正在播放 CSS 动画； -
transition-property不为none，且对应属性（如transform、opacity）的getComputedStyle值在最近发生了变化（需配合transitionrun/transitionstart事件或 MutationObserver 观察），但仅靠样式值无法 100% 判断“当前是否正在过渡中”——更稳妥的是监听transitionrun事件并维护一个活跃列表。
用 document.getAnimations() 获取全部活跃动画
现代浏览器（Chrome 43+、Firefox 48+、Edge 79+、Safari 16.4+）支持 document.getAnimations()，它返回所有当前正在运行的 CSS 动画和 Web Animations API 创建的动画实例：
- 每个动画对象的
effect.target就是绑定的 DOM 节点； - 过滤掉已暂停、已结束或未启动的动画（检查
playState === 'running'）； - 去重：同一个元素可能有多个动画，用
Set避免重复添加。
示例代码：
const runningAnimations = document.getAnimations() .filter(anim => anim.playState === 'running'); const animatedElements = [...new Set( runningAnimations.map(anim => anim.effect?.target) )].filter(el => el instanceof Element);
注意边界情况
以下情况容易被误判或漏判：
- CSS 动画设置了
animation-delay但尚未开始 →playState是pending，不属于running； - 过渡（transition）触发后立刻结束（如 0.01s）→ 很难捕获，建议结合
transitionrun和transitionend事件动态追踪； - 使用
requestAnimationFrame或 JS 手动更新样式实现的“动画”→ 不会被getAnimations()捕获，需业务层自行标记（例如加data-js-animated）； - 伪元素（
::before/::after）上的动画 →getAnimations()会返回，但effect.target是其宿主元素，不是伪元素本身（伪元素无 DOM 节点）。
轻量兼容方案（不依赖 getAnimations）
如果需支持较老浏览器（如 IE 或旧版 Safari），可退化为静态扫描：
- 遍历目标范围内元素（如
document.querySelectorAll('*')）； - 对每个元素调用
getComputedStyle(el)，检查：
–animationName !== 'none'
–transitionProperty !== 'none'； - 注意：这只是“有动画定义”，不等于“正在播放”。如需运行时判定，必须配合事件监听或轮询（不推荐）。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
