css transition无法真正暂停，只能通过强制重排（如读取offsetwidth）或临时设transition为none来中断并重置动画流程，核心是打破时间连续性、触发浏览器重新计算渲染树。
transition 无法真正“暂停”，只能中断重置
浏览器原生不支持暂停 CSS transition，所谓“取消”本质是打断当前过渡流程，强制跳转到目标值或初始值。关键不是等它结束，而是让浏览器放弃当前动画帧调度——这需要触发重排（reflow）或绕过 transition 机制。
用 offsetWidth 强制重排中断过渡
这是最轻量、兼容性最好的中断方式，适用于鼠标移出、状态切换等即时响应场景。
- 先移除或修改触发过渡的 class（如
element.classList.remove('active')） - 立即读取
element.offsetWidth（或clientHeight、getComputedStyle），触发同步布局计算 - 再设置终态样式（如
element.style.transform = 'scale(1)'）或重新加回 class
注意：offsetWidth 必须在修改样式后、新样式生效前读取；若元素已脱离文档流（display: none），需先设为 display: block 再读取。
临时禁用 transition 属性
适合 JS 控制的精细动画流程，比如拖拽中实时调整位置又不想带过渡。
- 保存原始
transition值：const saved = element.style.transition - 设为
none：element.style.transition = 'none' - 同步修改样式（如
element.style.left = '100px'） - 恢复：
element.style.transition = saved
⚠️ 避免直接操作 style.transition = ''，空字符串不会清除内联样式，得用 'none' 或显式还原。
用 .no-transition 类统一管理
比内联 style 更可维护，尤其在组件化或频繁状态切换时。
- CSS 中定义：
.no-transition { transition: none !important; } - JS 中：
element.classList.add('no-transition')→ 修改样式 →element.classList.remove('no-transition') - 确保该类优先级足够高（
!important很必要，否则易被其他规则覆盖）
复杂点在于：如果过渡原本由多个 class 共同控制（比如 .fade.in），仅删一个 class 可能不够，必须确认最终 computed transition 值确实为 none —— 打开 DevTools 的 Computed 面板验证最可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
