CSS过渡不支持原生暂停/恢复，但可通过transition:none中断动画并定格瞬时值，再经强制重排后重设transition来恢复；也可改用animation配合animation-play-state:paused实现原生控制。
CSS 过渡（transition）本身不支持暂停/恢复，浏览器没有 transition-play-state 这类属性；但可以通过状态切换 + 过渡重置技巧，模拟出“暂停”和“恢复”的行为。
用 transition: none 中断当前过渡
当元素正在执行过渡时，直接将 transition 设为 none，浏览器会立即停止当前过渡动画，并把元素定格在当前渲染位置（注意：不是最终值，而是中断时刻的瞬时值）。
- 必须在 JS 中同步修改样式，不能仅靠 class 切换（因 class 变更可能被批量合并，导致过渡未真正中断）
- 推荐用
el.style.transition = 'none'直接写内联样式，确保优先级最高 - 中断后若需恢复，不能直接改回原
transition值——要先触发重排（如读取offsetHeight），再设回过渡属性，否则浏览器跳过重绘
恢复过渡需重置 transition 并强制重排
恢复不是简单地把 transition 改回来，否则浏览器认为状态未变，不会重新触发过渡。必须插入一个“布局抖动”（layout thrash）来清空过渡队列。
function resumeTransition(el, property, duration, easing) {
// 1. 清除 transition
el.style.transition = 'none';
// 2. 强制重排 → 触发 layout
void el.offsetHeight;
// 3. 恢复 transition（此时浏览器会重新计算起始值）
el.style.transition = `${property} ${duration} ${easing}`;
// 4. 触发新过渡（例如改 transform 或 opacity）
el.style[property] = el.style[property]; // 重写当前值，触发过渡
}
用 getComputedStyle 获取中断时的瞬时值
如果需要在暂停后精确读取当前动画进度（比如做拖拽跟随或状态快照），不能依赖元素的原始 CSS 值或 dataset，而要用 getComputedStyle 读取渲染后的实时值。
立即学习“前端免费学习笔记（深入）”；
-
getComputedStyle(el).transform返回矩阵字符串，需解析（如用DOMMatrix） - 对
opacity、left等数值型属性，返回带单位的字符串（如"0.65"或"23.4px"），需parseFloat提取 - 注意：该值是当前帧渲染结果，非插值函数中间态，但对大多数 UI 控制已足够
替代方案：改用 @keyframes + animation
如果暂停/恢复是核心需求（如播放器式控制），建议放弃 transition，改用 animation 配合 animation-play-state: paused。它原生支持暂停、恢复、反向、时间偏移等操作，且可通过 animation-delay 和 animation-duration 动态调整。
-
animation的paused是即时生效的，无需重排 hack - 但无法像
transition那样自动响应属性变化——你得显式调用el.animate()或切换 class - 适合有明确开始/结束状态、需要精细控制节奏的场景，比如引导弹窗、步骤动画
真正难的不是怎么停，而是停在哪——transition 没有运行时状态句柄，所有“暂停”都是对渲染帧的快照劫持，稍有不慎就会丢失插值上下文。别试图封装成通用 hook，按需在关键节点手动干预更可靠。
