抽屉式侧边栏应优先用 transform: translateX() 实现滑入滑出，初始设为 translateX(-100%)，配合 transition 和 will-change: transform；若需主内容真实撑满，则改用 margin-left 动画，并严格匹配宽度值。
用 transform: translateX() 实现抽屉式滑入滑出
侧边栏要像抽屉一样从左滑出、不干扰主内容布局，transform: translateX() 是唯一靠谱的选择。它不触发布局重排，走合成层，低端安卓机上也能稳定 60fps。
- 初始状态必须是
transform: translateX(-100%)，不是display: none或visibility: hidden——后者无法过渡 - 显示时设为
transform: translateX(0)，搭配transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)，y1 > 1 才有弹性超调感 - 务必加
will-change: transform（仅动画触发前临时加），避免常驻开销 - 侧边栏需设
position: fixed或absolute，否则translateX()可能引发父容器溢出
用 margin-left 触发 Flex 布局重排
如果你希望侧边栏收起后，主内容区域**真实撑满、不留空隙、滚动条自动重绘**，就得用 margin-left 动画——它是唯一能通知 Flex 容器“我让出空间了”的属性。
- 初始宽度必须是确定值，比如
width: 200px或width: calc(16.67% - 1px) - 收起时设
margin-left: -200px（数值必须与宽度严格一致），否则会残留空白 -
transition只写margin-left 0.4s ease, opacity 0.4s ease，禁用all，否则z-index或visibility会被意外过渡 - 若侧边栏内有
position: sticky元素，margin-left动画会让它跳变，这时只能换transform方案
响应式断点里必须关掉过渡动画
大屏下侧边栏常驻，但很多人只改 width 和 transform，忘了关掉过渡——结果窗口缩放时侧边栏自己“抽风滑动”。
- 在
@media (min-width: 768px)里显式写transition: none或transition-duration: 0s - 优先用
min-width断点，max-width在移动端可能因地址栏缩放误判 - 划入期间给
<body>加overflow-x: hidden，防横向滚动条闪现；iOS Safari 不稳定时补一句position: fixed; width: 100vw
别混用 transform 和 margin-left
这是最典型的踩坑点：用 transform: translateX(-100%) 隐藏侧边栏，却指望 .main-content { flex: 1 } 自动填满——它不会。因为元素还在文档流里，“看起来不见了”不等于“真让出空间”。
立即学习“前端免费学习笔记（深入）”；
- 现象：滑出后点击区域仍在、背景还能滚动、主内容宽度没变
- 原因：
transform是纯视觉变换，不通知布局系统更新尺寸 - 补救无效操作：
width: 0或overflow: hidden不参与过渡，动画中会突变 - 判断标准很简单：你要的是“视觉遮罩”还是“空间释放”？选错就卡顿或留白
事情说清了就结束。弹性动画的“弹”不在贝塞尔曲线上，而在它是否真正贴合用户手指松开那一刻的预期节奏——这点没法靠参数穷举，得实机反复点按测。
