抽屉菜单不能只用 display: none 切换，因其为离散属性无法过渡动画；应使用 transform: translatex() 配合 transition: transform 实现高性能滑入滑出，并配合 overflow: hidden、pointer-events 控制与焦点管理。
抽屉菜单为什么不能只靠 display: none 切换
用 display: none 控制抽屉显隐，动画会直接失效——因为 display 是离散属性，浏览器不支持过渡。必须用可动画的属性，比如 transform 或 left/right 配合 position: absolute。
常见错误是把抽屉设为 visibility: hidden + opacity: 0，看似能过渡，但元素仍占布局空间，遮挡背后内容，且无法响应点击（除非加 pointer-events: none，又带来交互延迟问题）。
- 正确做法：抽屉始终在文档流外，用
position: absolute定位，通过transform: translateX()移入移出 - 必须设置
transition: transform 0.3s ease-in-out，不能只写transition: all（会意外触发重排） - 父容器需设
overflow: hidden，否则抽屉滑出时内容可能溢出可见区域
transform: translateX() 比 left 更适合抽屉动画
虽然 left 也能配合 position: absolute 实现位移，但它会触发 Layout（重排），而 transform 由合成器处理，性能更好，尤其在低端设备上更顺滑。
注意：若抽屉宽度不固定（比如用 max-width 或内容撑开），translateX(-100%) 可能移不够或过头——百分比是相对于自身宽度计算的，不是父容器。
- 固定宽度抽屉（推荐）：
width: 280px，然后用transform: translateX(-280px)归位 - 响应式抽屉：用
transform: translateX(calc(-1 * var(--drawer-width, 280px)))，配合 CSS 自定义属性动态控制 - 避免用
right: 100%+transition: right，IE11 对right过渡支持不稳定
如何让遮罩层（overlay）与抽屉同步出现/消失
遮罩层通常用半透明 div 覆盖页面主体，它的显示逻辑必须和抽屉严格同步，否则会出现点击穿透或视觉错位。
关键点在于：遮罩层和抽屉要共用同一套状态控制（比如同一个 class），而不是分别监听不同事件。
- 结构上，遮罩层和抽屉应同级，且都包裹在同一个相对定位的容器内（如
body或主容器） - 遮罩层用
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;，避免受抽屉父容器影响 - 遮罩的
transition应只作用于opacity，不要加visibility——否则动画中间帧会突然消失，导致闪烁 - JavaScript 中，切换状态时统一加/删
is-open类到根元素（如document.body），CSS 用.is-open .drawer和.is-open .overlay分别控制
移动端点击穿透与焦点管理容易被忽略
抽屉打开后，如果用户还能点到背后的内容（比如按钮、链接），说明 pointer-events: none 没配对好；更隐蔽的问题是键盘用户按 Tab 键时焦点跑出抽屉，不符合无障碍要求。
- 抽屉打开时，给
body加pointer-events: none，抽屉和遮罩层单独设pointer-events: auto - 抽屉打开后，用 JavaScript 把焦点移到抽屉第一个可聚焦元素（如
drawer.querySelector('button, [href], input')），并监听Escape键关闭 - 关闭抽屉时，记得把焦点切回触发按钮（
triggerButton.focus()），否则键盘用户会迷失在页面顶部 - 不要依赖
z-index堆叠顺序来“挡住”点击——它只影响绘制层，不影响事件捕获流
抽屉动画本身很简单，难的是状态同步、焦点链、触摸响应和边界情况处理。哪怕只是加个 transform，漏掉 overflow: hidden 或没管好 pointer-events，上线后就会收到“点不到菜单”“关不掉”“键盘操作失灵”的反馈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
