侧边栏抽屉必须用 transform 而非 left 或 margin-left，因其触发 GPU 加速、避免布局重排、防止 iOS 降级警告；需配合 fixed/absolute 定位、translateX(-100%) 隐藏、visibility+opacity 控制显隐，并拆分 transition 到具体状态 class，兼顾遮罩层、焦点管理、键盘支持与无障碍语义。
侧边栏抽屉为什么必须用 transform 而不是 left 或 margin-left
直接改 left 或 margin-left 触发的是 Layout（布局重排），动画卡顿明显，尤其在低端安卓机上会掉帧；transform: translateX() 属于合成层操作，走 GPU 加速，滑动顺滑。iOS Safari 对非 transform/opacity 的动画属性还有强制降级警告（DevTools 里能看到黄色感叹号）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏容器必须设
position: fixed或absolute，否则transform可能影响文档流导致主体内容错位 - 初始状态用
transform: translateX(-100%)把它完全移出视口左边界（注意：是 -100%，不是 -100px） - 不要给侧边栏设
display: none—— 这会让 transition 失效；改用visibility: hidden+opacity: 0配合pointer-events: none做彻底隐藏（仅用于关闭后收尾）
transition 写在哪？为什么不能只写 transition: transform 0.3s
只写 transition: transform 0.3s 看似够用，但实际会漏掉两个关键问题：打开时主体内容的遮罩层淡入、关闭时的反向响应。更稳妥的做法是把 transition 拆到具体状态变更的 class 上。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 定义两个核心 class：
.drawer-open控制侧边栏位移，.overlay-active控制遮罩层透明度和 pointer-events - 给侧边栏加
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)（比默认 ease 更自然） - 给遮罩层加
transition: opacity 0.3s, visibility 0.3s——visibility必须显式声明时长，否则切换瞬间消失会引发点击穿透 - 避免在
:root或通用选择器上写全局transition，容易污染其他动画
移动端点击穿透怎么破？pointer-events 不是万能的
用户快速连点两次（比如误触遮罩层外区域再点菜单），可能触发底层按钮，这就是点击穿透。仅靠 pointer-events: none 在 iOS Safari 下有延迟生效问题，且无法阻止 focus 移动。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 遮罩层（
.overlay）必须存在，且 z-index 高于主体内容、低于侧边栏；初始opacity: 0; visibility: hidden; pointer-events: none - 打开抽屉时，先同步设置
.overlay { opacity: 1; visibility: visible; pointer-events: auto }，transition 才能生效 - 额外加一行
body { touch-action: manipulation }，防止 iOS Safari 在拖拽抽屉时意外触发双击缩放 - JavaScript 关闭抽屉后，等
transitionend事件再移除.overlay-active，别用setTimeout硬等
键盘与屏幕阅读器支持常被忽略的细节
纯 CSS 实现的抽屉默认不处理焦点管理，键盘用户按 Tab 会跳进已隐藏的侧边栏，或卡在遮罩层外。Screen Reader 也无法感知状态变化。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏容器加
aria-hidden="true"，打开时 JS 动态改为aria-hidden="false"，同时设tabindex="-1" - 首次打开后，用
element.focus()主动聚焦到侧边栏第一个可交互元素（如关闭按钮） - 监听
Escape键：JS 中捕获keydown，判断e.key === 'Escape'并关闭抽屉 - 遮罩层加
role="dialog"和aria-modal="true"，告诉辅助技术这是模态上下文
抽屉动画本身很简单，真正难的是交互动线闭环：手势、键盘、焦点、语义、性能，缺一不可。尤其是 transitionend 的时机判断和 aria-hidden 的同步，稍不注意就会在 iOS 或 NVDA 下出问题。
