必须用 transform: translateX()，因其走 GPU 合成层、避免重排，而 left/margin-left 强制同步布局导致卡顿；需配合 will-change 或 backface-visibility 触发硬件加速，并确保侧边栏有明确 width。
必须用 transform: translateX()，否则在 iOS Safari 或低端安卓 WebView 里大概率卡顿、掉帧，甚至触发浏览器降级警告。
为什么不能用 left 或 margin-left
改 left 或 margin-left 会强制浏览器重排（reflow），每次动画帧都要重新计算布局，尤其在内容多或 DOM 深时明显抖动；iOS Safari 会在 DevTools 里标黄警告“forced synchronous layout”。translateX() 走 GPU 合成层，不碰布局，动画帧率稳定在 60fps。
- 常见错误现象：
left: -250px切换时页面横向滚动、Safari 动画一卡一卡 - 移动端尤其敏感：安卓 WebView 44–60、iOS 14–16 的老设备上，
left方案基本不可用 -
translateX(-100%)是基于自身宽度位移，不是父容器宽——所以侧边栏必须有明确width（如width: 280px），否则-100%行为不可控
transform: translateX() 动画不丝滑的真正原因
写了 translateX() 和 transition 却还是卡，大概率是没触发 GPU 合成。浏览器不会自动把所有 transform 都扔给 GPU，得“提示”它。
- 加
will-change: transform（仅在开启动画前动态加，关闭后移除，避免长期开销） - 或加
backface-visibility: hidden（更轻量，兼容性更好） - 避免在动画过程中同时改
opacity或width—— 这会让浏览器放弃合成层，降级回 CPU 渲染 - 别在
:root或通用选择器上写transition: all，容易污染其他元素动画
关键结构与状态控制要点
抽屉容器必须脱离文档流，否则位移会挤压主内容、引发跳动。默认隐藏态要真正“藏住”，不能靠 display: none（它会让 transition 失效）。
立即学习“前端免费学习笔记（深入）”；
- 侧边栏用
position: fixed（全屏覆盖）或absolute（需父容器position: relative） - 初始状态：
transform: translateX(-100%)+visibility: hidden+opacity: 0+pointer-events: none - 展开状态只切
transform: translateX(0)，再单独加visibility: visible和opacity: 1 -
transition写在默认状态上，比如.sidebar { transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }，别写all - 遮罩层必须和侧边栏同级，且用
transition: opacity 0.3s, visibility 0.3s——visibility不写时长会瞬间消失，导致点击穿透
移动端与可访问性绕不开的坑
真机测试时最容易翻车的是滚动锁定和焦点管理，光动画丝滑没用，用户一划屏幕就穿帮。
- 抽屉打开时，给
<body>加overflow: hidden，但注意 iOS 上要用overscroll-behavior: none防止下拉刷新干扰 - 收起后记得清空
transform并设display: none（仅收尾用），否则残留的visibility: hidden元素仍可能被屏幕阅读器读到 - 按
Esc关闭、Tab 键焦点落入抽屉、关闭后焦点回到触发按钮——这些不是锦上添花，是 WCAG 2.1 基础要求 - 移动端触摸拖拽需加
touch-action: pan-x，否则系统默认拦截水平滑动手势
最常被忽略的其实是 translateX(-100%) 的基准：它依赖元素自身宽度。一旦侧边栏用了 width: 100vw 或弹性布局又没设 min-width，位移就会失准——动画还在，但“藏哪儿了”没人知道。
