抽屉式导航必须用包裹并设aria-label，同步更新aria-expanded与class，仅用transform位移和transition，遮罩需与抽屉同级挂载body下，滚动锁定禁用overflow:hidden而用position:fixed方案。
抽屉式导航不能只靠 display: none 或 visibility: hidden 切换，否则动画失效、焦点失控、ARIA 属性不被识别——核心问题在于语义结构、渲染层控制和交互契约没对齐。
抽屉容器必须用 <nav></nav> 包裹，且设 role="navigation"
浏览器对 <nav></nav> 有隐式行为：屏幕阅读器跳过未包裹的导航内容，键盘 Tab 会直接越过整个抽屉区域。单纯用 <div class="drawer"> 会导致 <code>aria-expanded 完全无效，Safari iOS 上甚至可能不触发 transform 动画。
-
<nav role="navigation" aria-label="主菜单"></nav>是最低要求，aria-label或aria-labelledby必须存在 - 不要把
<nav></nav>拆到外层（比如放在<header></header>外），否则 ARIA 树层级断裂，aria-expanded同步失效 - JS 控制开闭时，必须同步更新
aria-expanded="true/false"和class="is-open"，不能只改类名
transform: translateX() 是唯一可靠位移方式
用 left 或 margin-left 触发动画，会在 iOS Safari 和低端安卓 WebView 中卡顿，因为它们触发 layout 重排；transform 只走合成层，60fps 更稳。
- 初始状态写
transform: translateX(-100%)，不是left: -100%或margin-left: -280px - 过渡只写
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)，别加opacity一起过渡，旧版 WebKit 可能降级为软件渲染 - 移动端 Safari 15.4 以下需在激活态加
will-change: transform防闪屏，但不要全局加，避免性能损耗
遮罩层（overlay）必须与抽屉同级、独立定位
很多人把遮罩写成抽屉的子元素，结果点击无效、层级错乱、或被父容器 overflow: hidden 截断。遮罩本质是全屏层，必须和抽屉平级挂在 下。
立即学习“前端免费学习笔记（深入）”；
- HTML 结构应为：
<nav class="drawer">...</nav><div id="drawer-overlay"></div> - 遮罩样式：
position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 999; - 点击关闭时，必须校验
e.target === overlay，不能直接监听overlay.click就关——否则点抽屉内链接也会触发关闭
移动端 body 滚动锁定不能用 overflow: hidden
给 加 overflow: hidden 会让滚动条消失，页面宽度突变，“右侧内容右移”，Safari 表现尤其明显。
- 正确做法是展开时加类：
body.is-drawer-open { position: fixed; top: -0px; width: 100%; } - 同时遮罩层加
touch-action: none，防止 iOS 上下拖拽穿透触发页面滚动 - 关闭后必须立即移除该类，否则后续所有页面滚动永久失效
- 若用 React/Vue，组件卸载前要清理 class，否则内存泄漏风险真实存在
真正难的从来不是“怎么滑出来”，而是关抽屉那一瞬间：焦点是否回到触发按钮、背景内容是否真不可操作、键盘 Tab 是否被 trap 在不可见区域、动画中断后状态是否可恢复——这些细节不逐条验证，上线后必被无障碍测试和低端机用户反复打脸。
