transition不会自动取消，连点时旧动画仍在运行，需监听transitionend事件并手动清理；推荐在新动画前强制重置transition、读取当前值再设目标值，避免跳变。
transition 不会自动取消，连点时旧动画还在跑
浏览器对 transition 的处理是“只加不删”：新样式一设，旧过渡没结束就强行覆盖，但浏览器不会中止它，也不会重置插值起点。结果就是视觉上卡顿、跳变，甚至元素“原地抽搐”。这不是 bug，是规范行为——transition 本身没有“中断语义”。
常见现象包括：
- 按钮连点两次，第二次点击后颜色瞬间变、位移却还按第一次的节奏走
- 菜单展开一半又被收起，高度直接跳到
0，中间帧全丢 -
getComputedStyle(el).transform读出来还是旧值，但视觉已乱
必须手动监听 transitionend 并清理状态
靠 CSS 自己搞不定，得用 JS 主动兜底。关键不是“等它结束”，而是“确保它真结束了，或假装它结束了”。
实操要点：
- 用
el.addEventListener('transitionend', handler, { once: true })绑定，避免重复触发 - 在回调里检查
event.propertyName，只响应你关心的属性（比如只处理'transform'，忽略'opacity'） - 如果用户快速操作导致
transitionend根本没触发（比如 class 刚加上就又被移除），就得“强制重置”：el.style.transition = 'none'→ 同步设目标值 →requestAnimationFrame(() => { el.style.transition = 'transform 0.25s'; })
连点前先取消上一轮过渡链
最稳的方式，是在新动画开始前，把旧的过渡上下文清干净。不是靠猜，是靠读取当前状态再覆盖。
推荐流程：
- 调用
getComputedStyle(el).transform拿到当前实际值（比如matrix(1, 0, 0, 1, 12, 0)） - 用
el.style.transform立即设成这个值，消除“未完成的差值” - 再设
el.style.transition = 'transform 0.25s ease-out' - 最后设目标值（如
el.style.transform = 'translateX(100px)'）
这招能绕过浏览器内部的插值队列混乱，特别适合拖拽、开关、折叠这类高频交互。
别让 transition: all 加剧错乱
transition: all 0.3s 表面省事，实际是埋雷。连点时，哪怕只是改了个 z-index 或 visibility，整个 all 都会被重新触发，而这些属性要么不可动画，要么动画无意义，反而抢占渲染资源。
正确做法：
- 显式列出真正需要过渡的属性：
transition: transform 0.25s, opacity 0.2s, box-shadow 0.15s - 避免在多个 class 里分散写
transition，统一收口到基础类（如.btn），状态类（如.btn--loading）只管值 - JS 中切换 class 前，确认基础类里的
transition始终存在——它得是一直在线的契约，不是临时开关
真正麻烦的从来不是怎么让动画动起来，而是动的过程中，你怎么知道它正在哪一帧、有没有被覆盖、起点还对不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
