最常见“无上下文”跳变是transition写在被js移除的类中；必须将transition抽到永不移除的基础类，状态类只管属性值；display切换会强制中断所有过渡；hover移出跳变因原始类缺初始值；js频繁触发需用transitionend监听与requestanimationframe兜底。
transition声明被动态移除导致“无上下文”跳变
最常见的情况是：你把 transition 写在了会被 JS classList.remove() 干掉的类里。一旦这个类消失，浏览器就失去过渡基准，后续任何属性变化（比如 opacity 从 1→0）都会直接生效，不插值。
典型错误写法：
.fade-out { opacity: 0; transition: opacity 0.3s; }
.fade-in { opacity: 1; }
执行 el.classList.remove('fade-out') 后，transition 消失；再加 'fade-in'，浏览器已无法回溯起点，只能瞬时渲染。
- 必须将
transition抽到一个**永不被移除的基础类**中，例如.trans-opac { transition: opacity 0.3s; } - 状态类只管值：
.is-hidden { opacity: 0; }、.is-visible { opacity: 1; } - 用 DevTools 的 Computed 面板盯住
transition是否始终存在，别让它忽有忽无
display 切换强制中断所有过渡
display 是离散属性，没有中间态。哪怕你给 opacity 和 transform 都写了 transition，只要同时改了 display: none ↔ block，浏览器就会立刻重绘，跳过全部动画过程。
- 不要写
transition: all 0.3s;+display: none;——display自己不参与过渡，但会拖垮别的属性 - 替代方案：用
visibility: hidden+opacity: 0组合，或max-height: 0+overflow: hidden - 若必须控制显隐，确保
display变更发生在transitionend之后，且不在同一帧内
hover 移出时跳变，是因为原始类没写全初始值
很多人只在 :hover 里写 transition 或只改部分属性，结果移出时浏览器不知道该“过渡回哪”，就直接回退到未声明的默认值（比如 color 回到 inherit），造成跳变。
-
transition必须写在原始类（如.btn），不是.btn:hover - 所有参与过渡的属性，原始类里都要有明确初始值：
opacity: 1、transform: scale(1)、color: #333，别依赖浏览器默认 - 避免用
inherit、unset、initial—— 它们会让浏览器无法确定目标值，transition静默失效
JS 快速多次触发导致过渡被覆盖
连续点击、频繁 hover 或状态切换时，新样式会立即覆盖旧样式，而浏览器不会自动取消正在进行的 transition，结果就是卡住、跳变或只执行前 10%。
- 监听
transitionend事件，检查event.propertyName确保只响应关心的属性 - 新动画开始前，先临时清空
transition：el.style.transition = 'none'，设目标值，再用requestAnimationFrame恢复transition并重设样式 - 注意：
transitionend在强制中断（如 class 立即移除）时可能根本不触发，得靠兜底逻辑
transition 被悄悄移除了——它不报错，只是安静地跳过动画。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
