transform 不能让主内容自动扩展，因其不改变文档流和盒模型尺寸；需用 margin-left 触发布局重排，或改用 fixed + transform 实现视觉抽屉。
transform 不能让主内容自动扩展，这是根本矛盾
用 transform: translateX(-100%) 隐藏侧边栏时，它仍在文档流中占位——flex: 1 的主内容区域根本感知不到空间变化，不会伸展。这不是动画写得不够顺的问题，而是布局机制决定的：transform 只改绘制位置，不改盒模型尺寸和布局贡献。
常见错误现象包括：侧边栏滑走后主内容宽度不变、滚动条没消失、右侧留白、点击穿透到被遮盖的按钮上。
- 别指望给
transform元素加width: 0或overflow: hidden来“补救”——这些属性不参与过渡，动画中途会突变 - 如果必须让主内容自适应扩展，就放弃
transform抽屉思路，改用margin-left动画（见下一条） - 若只是要一个视觉遮罩型抽屉（比如导航菜单），那
transform是唯一推荐方案，但得接受主内容不动
用 transform + fixed 实现真正平滑的抽屉动画
抽屉要顺滑，必须走合成层，而 transform 是目前唯一稳定触发 GPU 加速的 CSS 属性。搭配 position: fixed 才能彻底脱离文档流，避免影响主体布局。
关键参数组合：
- 初始状态：
transform: translateX(-100%)（注意是-100%，不是-280px），visibility: hidden，opacity: 0，pointer-events: none - 展开状态：
transform: translateX(0)，visibility: visible，opacity: 1，pointer-events: auto -
transition必须只写在具体属性上：transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s, visibility 0.3s——visibility不写时长会导致瞬间切换、点击穿透 - 父容器（如
body）需加overflow: hidden防内容溢出；动画中动态加will-change: transform，关闭后移除
为什么 margin-left 才能让 flex 主内容自动撑满
当你要的是“侧边栏收起 → 主内容无缝填满”的效果，margin-left 是唯一能触发布局重排（reflow）的可动画属性。Flex 容器看到外边距变化，立刻重新计算 flex: 1 的宽度。
实操要点：
- 侧边栏初始设固定宽度（如
width: 240px），同时margin-left: 0 - 收起时设
margin-left: -240px，不是-100%—— 百分比在 flex 容器里可能算不准 -
transition只写margin-left 0.4s ease-out，别用all，否则z-index或visibility会被意外过渡 - 如果侧边栏里有
position: sticky元素，margin-left动画会让它跳变，此时只能退回到transform方案并接受主内容不扩展
遮罩层和 body 滚动锁定最容易被忽略
抽屉弹出时，用户滚动页面，背景动而抽屉不动，视觉割裂极强。不能只靠 body { overflow: hidden } —— iOS Safari 会把滚动位置重置到顶部，键盘弹起后也无法恢复。
更稳妥的做法：
- 遮罩层与抽屉同级，
position: fixed，全屏覆盖，z-index在抽屉之下但在主内容之上 - 抽屉打开时，记录当前
scrollY，然后给body加position: fixed; top: -scrollY，关闭时再还原 - 移动端需用
100dvh而非100vh防止 Safari 地址栏收缩导致抽屉高度塌陷 - 焦点管理不能少：抽屉打开后
focus()到第一个可交互元素，按Esc关闭，支持键盘 Tab 导航
最复杂的点不在动画本身，而在遮罩层、滚动锁定、焦点、键盘支持这四者的协同——漏掉任一环，都可能让抽屉在真实场景中“卡住”或“不可用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
