应使用transform: translatex(-100%)配合transition实现平滑抽屉动画，因其触发硬件加速、不引发重排；需设position: fixed/absolute、同步主内容位移、保障可访问性及移动端适配。
用 transform + transition 实现平滑抽屉动画
纯 CSS 实现左侧侧边栏抽屉，关键不是靠 display: none 切换，而是用 transform: translateX(-100%) 把菜单“推”出视口。这样既保留 DOM 结构、不破坏焦点和屏幕阅读器逻辑，又能触发硬件加速，动画更流畅。
常见错误是直接改 left 或 margin-left，会导致重排（reflow），卡顿明显；也有人用 visibility: hidden 配合 opacity，但透明度变化无法阻止用户点击穿透或键盘焦点进入隐藏区域。
-
transform动画必须搭配transition: transform 0.3s ease-in-out，别漏写ease-in-out—— 线性过渡会显得生硬 - 菜单容器需设
position: fixed或absolute，否则会影响主内容流式布局 - 主内容区要同步加
transform: translateX(240px)（假设菜单宽 240px），否则菜单弹出时主内容不会“让位”
用 aria-expanded 和 aria-controls 保证可访问性
很多实现只顾视觉动效，却让屏幕阅读器用户完全不知道菜单状态。按钮必须带 aria-expanded="false"，菜单容器要有 id 并被按钮的 aria-controls 指向。
JavaScript 控制开闭时，务必同步更新这两个属性值：开时设为 "true"，关时设为 "false"。否则 NVDA 或 VoiceOver 读到按钮时只会说“按钮”，不会提示“菜单已关闭”。
- 菜单容器建议加
role="navigation"，明确语义 - 首次打开后，焦点应自动移到菜单第一个可聚焦元素（如首项
<a></a>或<button></button>），用focus()实现 - 按
Escape键应关闭菜单，且焦点需回到触发按钮上
移动端适配：避免 touchmove 冲突和滚动穿透
在 iOS Safari 上，抽屉弹出后如果主内容区有 overflow-y: auto，手指在菜单上滑动可能意外触发背后内容滚动 —— 这是滚动事件冒泡+穿透导致的。
解决方法不是禁用 body 的 touchmove（太粗暴，影响体验），而是给菜单容器加 touch-action: pan-y，并确保菜单内部可滚动区域（如长菜单列表）单独设 overflow-y: auto 且 touch-action: pan-y。
- 抽屉打开时，给
加class="drawer-open"，CSS 中写.drawer-open { overflow: hidden; }，比 JS 拦截touchmove更可靠 - 不要用
position: fixed套height: 100vh做全高菜单 —— iOS Safari 的vh在地址栏收放时会跳变，导致底部留白或遮挡 - 菜单宽度建议用
min-width: 240px+max-width: 80vw，兼顾小屏和大屏阅读舒适度
用 prefers-reduced-motion 尊重系统动效偏好
不少用户在系统设置里开启了“减少运动”，但多数抽屉组件仍强制播放 300ms 动画，造成眩晕感。这不是锦上添花，而是 WCAG 2.1 AA 级要求。
只需一行媒体查询：@media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }。注意不能只写 transition: none，否则某些浏览器会忽略状态切换。
- 该规则应放在全局 CSS 最底部，确保能覆盖组件内联样式或第三方库样式
- 若用 JavaScript 动态控制动画（如用
requestAnimationFrame），也要先检测window.matchMedia("(prefers-reduced-motion: reduce)").matches - 动画取消后，状态切换应改为立即生效（比如直接设
transform: translateX(0)而非靠 transition 过渡）
抽屉看似简单，但真正健壮的实现，得同时扛住键盘导航、屏幕阅读器、iOS 滚动、系统动效偏好这四类边界情况 —— 少一个，上线后就容易在特定设备或用户群里出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
