直接给width/height加transition会触发重排（reflow），导致卡顿，且height: auto无法插值；应改用max-height、transform或opacity等不触发布局的属性实现平滑过渡。
transition 为什么对 width/height 一动就卡
直接给 width 或 height 加 transition，浏览器每次都要重新计算布局（reflow），触发整个渲染流水线重跑。哪怕只是 0.3s 的过渡，也可能在中低端设备上掉帧、肉眼可见卡顿。
更糟的是：如果高度从 auto 变成具体数值（比如 height: 200px），transition 根本不生效——因为 auto 不可插值，浏览器连起始值都算不出来。
- 别写
transition: width 0.3s;或transition: height 0.4s; - 避免
height: auto → height: 150px这类组合，它静默失败，不是 bug，是规范限制 - 真要控制尺寸变化，用
max-height模拟（需预设足够大的上限值），或改用transform: scaleY()+overflow: hidden
用 transform 替代 top/left/margin 实现位移过渡
top、left、margin 都会触发布局重排；而 transform: translateX() 或 translateY() 走的是合成层（compositor layer），只重绘（repaint），GPU 加速，基本不卡。
注意：别只加 transform 就完事，得配合 will-change: transform 提前提示浏览器（但别滥用，否则内存开销上升）。
- ✅ 正确：
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);+transform: translateX(20px); - ❌ 错误：
transition: left 0.3s;+left: 20px;（尤其在频繁交互场景下明显卡） - 慎用
margin过渡：它虽能动，但会推挤兄弟元素，造成意外布局抖动
opacity 和 transform 是唯二真正安全的过渡属性
只有这两个属性能保证：不触发 reflow、不触发 repaint 全量（只局部）、兼容性好、GPU 加速稳定。其他所谓“可动画属性”（如 color、background-color）虽可用，但属于 repaint 级别，高频使用仍有压力。
如果你的动效目标是「视觉位移 + 淡入淡出」，优先拆解为：transform 控制位置/缩放/旋转，opacity 控制显隐——不要混用 visibility 或 display，它们不可插值，写了 transition 也白搭。
-
opacity支持从0到1平滑过渡，且不影响文档流 -
transform推荐用translate3d(0, 0, 0)强制开启 GPU 合成（尤其在 Safari 上更稳） - 别给
display写transition：它永远只闪现，不会渐变
JS 批量改样式时 transition 失效怎么办
用 JS 连续设置多个样式（比如先改 opacity 再改 transform），浏览器可能合并渲染，只触发一次过渡——因为两次变更被压进同一个重排周期里。
解决办法不是加 setTimeout，而是强制触发一次重排，让浏览器“看到”第一次变更已落地：
- 改完第一个样式后，立即读取一个布局相关属性，例如
offsetHeight、getBoundingClientRect()或getComputedStyle(el).opacity - 再改第二个样式，此时 transition 才会分别响应
- 示例：
el.style.opacity = '0';<br>el.offsetHeight; // 强制重排<br>el.style.transform = 'translateX(100px)';
这个细节在模态框入场、列表项逐个展开等场景里特别关键，漏掉就会动画“跳变”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
