transition 不支持中途反向播放，它仅定义单次a→b补间，鼠标移开时是触发新b→a过渡而非倒放；需中断回退须用js重置class并强制重排；复杂控制应改用web animations api。
transition 本身不支持“中途反向播放”
这是最常被误解的一点：transition 没有 reverse() 方法，也不提供运行时方向切换能力。它只定义「从 A 状态到 B 状态」的单次补间过程，鼠标移开或 class 移除时，浏览器自动执行「B → A」的对称过渡——这不是“反向播放”，而是重新触发一次新过渡。
所以当你看到元素在 hover 中途快速进出、出现卡顿或抽搐，本质是多次触发 A↔B 的来回过渡，而非某个动画被倒放。
想让 transition “中断并回退”，得靠 JavaScript 强制重置
如果需要在动画进行中（比如 200ms 处）立刻掉头，必须打破 CSS 的自动行为，手动干预 DOM 状态：
- 移除当前触发 transition 的 class（如
.open），让元素回到初始样式 - 强制浏览器重排（例如读取
offsetHeight或getComputedStyle(el).transform），清空正在运行的过渡帧 - 再立即加回 class，触发新的过渡（此时方向取决于你设置的目标状态）
示例逻辑：
el.classList.remove('open');
// 触发重排
void el.offsetWidth;
el.classList.add('open');
注意：这会重置整个过渡，不是“倒着播剩下 100ms”，而是从头开始播一次新动画。
真正需要“可中断+可反向”的场景，该换用 Web Animations API
transition 设计目标就是简单状态切换；一旦需求变成「播放一半暂停→反向→继续」，它就力不从心了。这时候该上 Element.animate()：
- 它返回一个
Animation对象，有reverse()、pause()、play()方法 - 支持精确控制当前播放进度（
currentTime）、播放方向（playbackRate） - 和 transform/opacity 配合时性能与 transition 相当，且不依赖 class 切换
简例：
const anim = el.animate([
{ transform: 'translateX(0)' },
{ transform: 'translateX(200px)' }
], { duration: 300 });
// 播到一半时反向
anim.currentTime = 150;
anim.reverse(); // 立刻掉头往回走
别用 display: none 配合 transition 做开关动画
很多人试图通过 display: none + transition 实现“关闭时反向滑出”，结果动画直接消失——因为 display 不可过渡，设为 none 的瞬间，元素脱离渲染树，所有过渡被丢弃。
正确做法是：
- 保持元素始终在 DOM 中（不删、不设
display: none） - 用
opacity和transform控制显隐与位移 - 关闭时，先移除
.open类，让 transition 自动执行回退
关键点在于：过渡能否生效，取决于属性是否可动画化、元素是否持续参与布局——这两条，display 全都不满足。
真正难的不是写 reverse，而是判断什么时候该放弃 transition、改用更可控的机制。过渡适合状态明确、路径固定的切换；一旦涉及动态控制、中间态干预或复杂时序，就得交给 Animation API。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
