getanimations() 返回 animation 实例数组而非动画名；需用 getcomputedstyle(el).animationname 获取 css 动画名，js 动画则需手动维护状态；多动画共存时应按用途过滤或使用 weakmap 管理；react/vue 中需延迟至下一帧获取；firefox 下受样式限制易返回空，建议结合事件监听与状态管理。
getAnimations 返回的是 Animation 实例，不是 CSS 动画名
很多人以为 getAnimations() 能直接拿到 animation-name 字符串，结果在工具栏里显示为空或 undefined。实际上它返回的是 Animation 对象数组，每个对象的 effect 属性才关联到关键帧，而动画名藏在 effect.getTiming().easing 之外——得靠 effect 的 getKeyframes() 或更可靠的方式：从原始样式中提取。
- 正确做法是先用
getComputedStyle(el).animationName获取当前生效的动画名（注意：只对 CSS 动画有效，对 JS 创建的el.animate()不返回名称） -
getAnimations()更适合判断播放状态：animation.playState === 'running'、animation.currentTime等 - 若工具栏需同步「是否正在播放」，优先监听
animation.onfinish和animation.oncancel，而非轮询playState
工具栏按钮状态与多个动画共存时的冲突
一个元素可能同时有多个 CSS 动画（比如 slide-in + fade），getAnimations() 会返回全部，但工具栏通常只允许激活一种动效类型。这时候直接取第一个动画会出错——比如用户刚点完「淡入」，DOM 上还残留着未结束的「缩放」动画。
- 建议按动画用途分类过滤：
anim.effect?.getTarget() === targetEl && anim.id.startsWith('toolbar-')（前提是你在创建动画时设了id） - 更稳妥的做法是维护一个映射表：
const activeAnimations = new WeakMap<element set>>()</element>，在调用el.animate()或触发 CSS 动画前手动记录 - 避免依赖
getAnimations().length > 0判断「是否有动画」——过渡动画（transition）也会出现在列表里，但它不属于Animation类型（Chrome 中会返回CSSTransition，但不统一）
React/Vue 环境下 getAnimations 触发时机不对
在组件更新后立刻调用 getAnimations()，经常返回空数组。这是因为 DOM 渲染和动画启动不同步：CSS 动画需要样式计算完成、重排重绘后才真正挂载到动画系统中，而 JS 动画（el.animate()）也需要一帧时间才能出现在列表里。
- 必须等下一帧：
requestAnimationFrame(() => { el.getAnimations() }) - Vue 用户注意：
nextTick不够，它只保证 DOM 更新，不保证动画就绪；仍需加一层requestAnimationFrame - React 中若用
useEffect，确保依赖项包含触发动画的 state，并在 effect 内部延迟获取：setTimeout(() => console.log(el.getAnimations()), 0)比requestAnimationFrame更保守，但兼容性更好
Firefox 下 getAnimations 返回空数组的常见原因
Firefox 对 getAnimations() 的实现比 Chrome 更严格：如果动画被 display: none、visibility: hidden 或父级 overflow: hidden 截断，它默认不计入返回结果——即使动画实际在运行。
- 排查时先检查 computed style：
getComputedStyle(el).display !== 'none'且getComputedStyle(el).visibility === 'visible' - 临时绕过方案：给元素加
position: absolute; left: -9999px;（保持渲染但脱离视口），再调用getAnimations() - 不要依赖
getAnimations()做跨浏览器的动画存在性断言；对 Firefox，更推荐监听animationstart事件并自行维护状态栈
动效同步真正难的不是读取数据，而是定义「同步什么」——是当前播放的动画名？还是所有已注册的可选动效？抑或是用户最近一次点击的意图？这些语义差异会让 getAnimations() 的使用方式完全不同。别把它当万能钩子，先想清楚工具栏到底要反映哪一层状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
