纯HTML无法实现侧边栏抽屉效果，必须结合transform: translateX()、transition和JavaScript切换类名；display: none会导致过渡失效、重排卡顿及无障碍问题；遮罩层需与侧边栏同级且独立定位；移动端需谨慎处理body滚动禁用及iOS软键盘兼容性。
纯 HTML 写不出侧边栏抽屉效果——它没有状态、不响应点击、也不能触发动画。真正起作用的是 transform: translateX() + transition + JavaScript 切换类名，三者缺一不可。
为什么不能只用 display: none 控制显隐
常见错误是给侧边栏写 display: none，点击按钮再切回 display: block。这会导致：
-
transition完全失效，因为display不可过渡 - 每次显示都触发重排（reflow），尤其含图片或表单时明显卡顿
- 屏幕阅读器仍可能读取隐藏内容，
aria-hidden不同步就等于没设
正确做法是始终让元素在渲染树中：初始设 transform: translateX(-100%)，打开时切到 translateX(0)，靠 transition: transform 0.3s ease 实现滑入。
transform: translateX() 比 left 或 margin-left 更稳
用 left: -280px 看似直观，但问题不少：
立即学习“前端免费学习笔记（深入）”；
- 触发浏览器重排，动画易卡顿，尤其低端安卓 WebView
- 在
flex或grid容器里行为不稳定，可能被overflow: hidden截断 - iOS Safari 对
left的硬件加速支持弱，滑动不如transform流畅
必须加 will-change: transform 提前提示合成器优化；移动端建议补兜底 left: -100vw，防老版 iOS 渲染异常。
遮罩层（overlay）必须和侧边栏同级且独立定位
很多人把遮罩写成侧边栏的子元素，结果点不中、盖不住、滚动穿透。关键点：
- 遮罩和侧边栏都应是
<body>的直接子元素，不能嵌套 - 遮罩样式必须含
position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; - 侧边栏
z-index: 1000，确保在遮罩之上 - 遮罩默认
pointer-events: none，打开时 JS 改为pointer-events: auto，否则点击无效
否则用户点遮罩关不掉抽屉，或者点到遮罩背后的链接跳转中断——这是真实线上高频报错。
移动端 body 滚动禁用不能粗暴设 overflow: hidden
直接给 <body> 加 overflow: hidden 会引发页面“跳动”：滚动条消失 → body 宽度突增 → 右侧内容右移。更稳妥的做法：
- 抽屉打开时：
document.body.style.overflow = 'hidden' - 关闭时：
document.body.style.overflow = ''（别用auto，避免 Safari 兼容问题） - 同时给主内容区加
aria-hidden="true"，抽屉内加aria-hidden="false" - 监听
Escape键和遮罩点击，且在transitionend后才恢复滚动，否则动画未完就解锁，视觉撕裂
最易被忽略的是：iOS Safari 软键盘弹出时，position: fixed 抽屉会被顶上去。这不是 CSS 能修的，得监听 focus 事件临时切 position: absolute 并手动算 top 值——真机测试不可跳过。
