过渡不流畅主因是触发条件不稳定、属性突变或浏览器未捕获状态变化；应使用可动画属性（如transform、opacity）、明确起止值、避免强制重排，并通过class切换而非内联样式控制。
过渡回退不流畅，通常不是因为没写 transition，而是触发条件不稳定、属性值突变或浏览器未能正确捕捉状态变化。关键在于“可过渡属性”的确定性、起止值的明确性，以及避免强制重排（layout thrashing）。
确保 transition 作用在可动画的属性上
CSS 中只有部分属性支持平滑过渡（如 opacity、transform、color、width 等），而像 display、height（从 auto 开始）、z-index 等无法过渡或会中断动画。
- ✅ 推荐用
transform: scale()或opacity替代display: none或height: 0 - ✅ 若需控制显隐，优先用
opacity + visibility组合，而非display - ❌ 避免写
transition: all 0.3s ease;—— 它会让所有变更属性都尝试过渡，包括不可过渡项，反而引发卡顿或意外行为
起始/结束状态必须明确且可计算
浏览器需要确切知道“从哪到哪”才能插值。若初始值是 auto、inherit 或依赖 JS 动态插入的样式，过渡就可能失效或跳变。
- 例如：设
height: auto→height: 200px不会过渡；应改用max-height: 0→max-height: 300px（并确保足够大） - 用
getComputedStyle(el).height在 JS 中读取真实像素值后，再设为过渡目标值（适合动态高度） - 给元素预设一个明确的初始状态（比如 class 初始含
opacity: 1; transform: translateY(0);），再通过切换 class 触发变化
避免 layout 触发打断过渡链
在一次 JS 执行中，如果先读布局（如 offsetHeight），再改样式，浏览器会强制同步计算（reflow），可能导致过渡被重置或延迟一帧。
立即学习“前端免费学习笔记（深入）”；
- 把“读取”和“写入”操作分开：先批量读取，再批量写入（如用
requestAnimationFrame延迟到下一帧写样式） - 用
transform和opacity替代top/left/width—— 它们走合成层（compositor），不触发重排 - 对频繁交互的元素添加
will-change: transform;（慎用，仅对需优化的元素）
用 class 切换代替内联 style 控制过渡
直接操作 element.style.xxx 易覆盖 CSS 中定义的 transition，或导致样式优先级混乱。
- 定义好 CSS 类：
.box { transition: opacity 0.25s ease, transform 0.25s ease; }
.box.active { opacity: 1; transform: translateY(0); }
.box.inactive { opacity: 0; transform: translateY(-10px); } - JS 中只做
el.classList.add('active')或el.classList.toggle('active') - 如需 JS 控制时机，可用
el.offsetHeight强制重排后再加 class（触发重绘），或用setTimeout(..., 0)微任务延后
