margin-left 是唯一能真正释放侧边栏空间并触发 flex 重排的属性，因为 transform 仅视觉位移而不改变文档流；其动画需限定 transition、明确初始宽度、避免同步布局读取，并注意低端设备帧率与 ios 渲染延迟。
必须用 margin-left，不能用 transform: translateX() —— 后者只动视觉位置，不释放空间，主内容区根本不会扩展。
为什么 margin-left 是唯一能推开主内容的属性
Flex 或 Grid 布局中，.main-content { flex: 1 } 要自动填满剩余宽度，前提是侧边栏的“实际占位”被移除。只有改变盒模型在文档流中的位置（比如用负 margin-left），才能触发浏览器重排，让 Flex 容器立刻重新分配空间。
-
transform: translateX(-200px)只是把元素“画”到左边，它仍在文档流里占着 200px 宽度，flex: 1看不见变化 -
margin-left: -200px相当于把侧边栏向左推出布局边界，其原始宽度空间被真正释放 - 初始宽度必须明确：用固定值（如
200px）或相对值（如calc(16.67% - 1px)），否则收起时margin-left: -200px会偏移不准，留白
margin-left 动画的正确写法与常见错误
transition 必须只作用于 margin-left 和 opacity，不能写 all —— 否则 z-index、visibility 等不可动画属性会被强行过渡，导致遮罩层错位或点击穿透。
- 基础样式中就要声明：
transition: margin-left 0.4s ease, opacity 0.4s ease - 收起态设为：
margin-left: -200px; opacity: 0；展开态为：margin-left: 0; opacity: 1 - 别在 JS 中读取
offsetWidth或getComputedStyle(el).marginRight后立刻切 class，这会强制同步布局，动画直接跳帧 - 如果侧边栏里有
position: sticky元素，margin-left动画会让它突然跳变 —— 这种情况得换方案，比如改用 width + overflow-hidden
移动端和低端设备上的兼容性注意点
Redmi Note 9、旧款 iPad 等设备上，margin-left 动画实测平均帧率仅 32fps，而 transform 能稳定在 58–60fps。如果你的侧边栏不需要推主内容（比如只是模态导航抽屉），就该果断换 transform。
- 判断依据很简单：主内容区是否必须“真实撑满”？是 → 用
margin-left；否 → 用transform: translateX() - 用
margin-left时，避免在父容器上设flex-wrap: wrap或grid-auto-flow: dense，这些会干扰重排时机 - iOS Safari 对
margin-left动画的渲染延迟略高，建议加will-change: margin-left（仅在动画触发前 set，结束后 remove）
最易被忽略的一点：动画过程中如果用户快速连点两次开关按钮，margin-left 的过渡会被打断并重置起始值，导致卡在中间状态。必须用 JS 锁定状态（例如加 isAnimating 标志位），等 transitionend 后再允许下一次操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
