应避免用width过渡而改用transform实现宽度动画。因width触发重排导致卡顿，transform仅触发合成且GPU加速；常用scaleX或translateX模拟，需配合overflow、transition明确属性及反向缩放等细节。
当 CSS 宽度（width）变化触发重排（reflow），会导致布局抖动、性能下降，尤其在动画或交互中明显卡顿。解决核心是：**避免直接过渡 width、height、left、top 等触发布局的属性，优先用 transform: scaleX() 或 transform: translateX() 模拟宽度变化，并配合 transition 实现流畅动画。**
为什么 width 过渡不推荐？
width 属于几何属性，修改它会强制浏览器重新计算元素及其后代的位置和大小（即重排），再重绘。频繁重排 → 高 CPU 占用 → 掉帧。而 transform 仅影响合成层，由 GPU 加速，不触发重排，只触发重绘或更轻量的合成。
用 transform 模拟宽度变化的常见方式
-
水平缩放（scaleX）：适用于「等比例缩放内容」场景。例如：
transform: scaleX(0.8);让元素视觉上变窄，但实际占用空间不变（需配合transform-origin: left控制缩放基点）。 -
位移遮罩（translateX + overflow）：父容器设
overflow: hidden，子元素固定宽，用transform: translateX(-20px)模拟“收缩露出部分”。适合菜单、抽屉等。 -
结合 max-width + transform：初始设
max-width: 0; overflow: hidden;，过渡时改max-width: 200px;并叠加transform: scaleX(1)，双重保险兼顾可访问性与性能。
transition 应该写在哪儿？
务必写在 transform 所在的选择器上，且明确指定属性名：
.box { transition: transform 0.3s ease-in-out; }
.box.open { transform: scaleX(1); }
立即学习“前端免费学习笔记（深入）”；
不要写成 transition: all 0.3s —— 它会无意过渡其他属性（如 color），增加无效计算。
注意边界情况
- scaleX 会影响内部文字和子元素缩放，若需保持字体大小，给子元素加反向缩放：
transform: scaleX(1.25);（与父级抵消）。 - 使用 transform 时，元素仍占据原始文档流空间。如需“真正收起不留空”，需配合
visibility: hidden和height: 0等，在 transition 结束后通过 JS 或transitionend事件切换。 - 确保触发硬件加速：可加
transform: translateZ(0)或will-change: transform（慎用，仅对频繁动画元素）。
