不能用 left 或 margin-left 做抽屉动画，因其触发重排导致卡顿闪动；应使用 translateX() 配合 fixed/absolute 定位、transform 过渡、遮罩层及滚动锁定等完整方案。
为什么不能用 left 或 margin-left 做抽屉动画
直接改 left 或 margin-left 会触发 layout（重排），浏览器必须反复计算盒模型、行高、折行等，动画一跑就掉帧。低端安卓机上常卡在 30fps 以下，iOS Safari 还会弹黄色警告“强制降级”。真机一测就露馅——不是卡顿就是闪动。
常见错误现象：left: -100% 在 iOS 上偶尔闪一下才隐藏；点击后抽屉“跳一下”才展开；快速滑动时出现撕裂感。
-
translateX()走 GPU 合成层，只重绘不重排，是唯一能稳住 60fps 的选择 -
translateX(-100%)是相对自身宽度的位移，比写死translateX(-280px)更适配不同设备；但如果侧边栏宽度固定（如width: 280px），用translateX(-280px)反而更精准 - 别同时写
left和transform：浏览器行为难预测，Safari 可能直接忽略位移
transform: translateX() 动画必须配哪些 CSS 属性
光写 transform: translateX(0) 不够，缺了关键配套，动画就失效或错位。
- 侧边栏容器必须设
position: fixed或position: absolute，否则translateX()会影响文档流，挤占主内容区 - 初始状态必须是
transform: translateX(-100%)，不能用display: none或visibility: hidden—— 这会让transition失效 - 过渡必须写全：
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)，cubic-bezier(0.34, 1.56, 0.64, 1)比默认ease更有弹性，模拟原生手感；漏写缓动函数会显得生硬 - 移动端需动态加
will-change: transform（仅打开/关闭瞬间 set），避免常驻开销；上线环境可用transform: translateZ(0)替代，兼容性更好
遮罩层和滚动锁定怎么配合才不穿帮
遮罩层不是摆设，90% 的“点不关”“关了还能滑”问题都出在这儿。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层
.overlay必须position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;—— 别用100%，某些安卓浏览器算的是父容器高度，导致遮不住底部 - 层级顺序要严格：
z-index主内容区为 1，遮罩层为 10，侧边栏为 11；否则 iOS 上touchstart可能穿透到下层 - 滚动锁定必须加在
body上：.no-scroll { overflow: hidden; height: 100vh; overscroll-behavior: contain; }，JS 打开时立刻加，关闭时立刻移除（别等transition结束） - 遮罩层关闭监听用
click，不用touchend：后者在快速点击时容易漏触发；但必须显式设置pointer-events: auto
响应式断点里最容易被忽略的坑
大屏下侧边栏常驻，但很多人只改 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 - 如果侧边栏内有
position: sticky元素，margin-left动画会让它跳变——这时只能换transform方案，别硬扛
真正麻烦的不是写动画，而是让动画在各种尺寸、各种系统、各种手势下都不穿帮。最常被忽略的是遮罩层的 pointer-events 和 body 的滚动锁定时机——差几十毫秒，体验就断层。
