17370845950

过渡不流畅主因是触发条件不稳定、属性突变或浏览器未捕获状态变化；应使用可动画属性（如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) 微任务延后