animation-play-state仅控制@keyframes定义的css动画，对transition无效；暂停过渡需用js操作类名或transition属性，多动画时状态值须按顺序逗号分隔。
不能直接判断 transition 是否“正在运行”，因为 CSS 过渡本身没有运行时状态暴露接口——它既不提供 animation-play-state 那样的属性，也不触发可监听的事件（如 animationstart）。
transition 没有内置运行态检测机制
浏览器不会把 transition 的执行过程当作一个“播放中”的动画实例来管理。它只是在属性值变化的瞬间启动一个内部计时器，完成插值后即销毁，全程无状态保留。
-
transition是响应式、一次性、不可暂停的：只要触发状态变化（比如加 class、hover），就开始；结束后就归零，没有“中间态”可查 - 没有
getComputedStyle(el).transitionPlayState这种 API，animation-play-state对它完全无效 - 无法用
el.addEventListener('transitionrun')监听——这个事件只对animation生效，transition不发射任何标准事件
靠 JS 模拟“是否在动”的常用手段
实际开发中想感知 transition 是否进行中，只能靠间接方式推断，且必须配合明确的触发逻辑：
- 在触发过渡前设一个标记变量，比如
isTransitioning = true，然后用setTimeout在transition-duration后设为false - 监听
transitionend事件，在回调里清除标记 —— 注意：该事件只在过渡自然结束时触发，若中途属性再次变化（如 hover 离开又回来），可能被取消或重置 - 用
getComputedStyle(el).getPropertyValue('property-name')对比当前值和目标值，若介于两者之间，大概率正在过渡（但受 timing-function 影响，无法精确判定“是否刚启动”） - 避免依赖
offsetWidth强制重排来“探测”，这会打断渲染流水线，尤其在滚动中极易引发卡顿
为什么不能用 animation-play-state 判断 transition
这是新手最常踩的坑：给元素写了 transition: opacity 0.3s，然后尝试设置 style.animationPlayState = 'paused' 或读取它，结果毫无反应。
-
animation-play-state只作用于通过@keyframes+animation-name启动的动画 - 哪怕你把
transition写成transition: all 0.3s，它依然不是 animation，浏览器根本不识别它的“播放状态” - 错误日志里不会报错，只是静默忽略——这点特别容易让人误以为是写法问题，其实根本不在同一套机制里
真正需要“运行中检测”时，该换用 animation
如果你的场景必须可靠知道动画是否活跃（比如暂停/恢复、同步多个元素、与 Canvas 动画对齐），transition 就不是合适工具。
- 改用
@keyframes+animation，它支持animation-play-state、animationiteration、animationstart等完整事件和状态控制 - 哪怕只是模拟 hover 效果，也可以用 JS 控制 class 切换 +
animation，而非依赖伪类触发transition - 注意：
animation的animation-play-state只影响已启动的实例；单次动画结束后再设running不会重播，需重置animation（例如清空再重设animation-name）
transition 的设计哲学就是“隐式、瞬时、不可控”——它适合简单交互反馈，不适合需要精细生命周期管理的场景。一旦你开始琢磨“它现在动没动”，说明已经超出它的能力边界了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
