抽屉体验关键在于硬件加速动画、touch-action控制及可访问性：用transform:translatex()替代left/margin-left并配will-change；设touch-action:pan-y防ios滑动冲突；需aria角色、aria-hidden及焦点管理确保屏幕阅读器正确识别。
HTML 抽屉（Drawer）本身不是原生 HTML 元素，所谓“抽屉”是前端开发者对侧滑面板（side panel）的通用叫法；真正影响体验的不是叫法，而是 transform 动画是否启用硬件加速、touch-action 是否禁用默认滚动干扰、以及是否在开合时正确管理焦点和屏幕阅读器语义。
为什么用 transform: translateX() 而不是 left 或 margin-left
用 left 或 margin-left 触发的是 layout + paint，动画卡顿明显，尤其在中低端安卓机上。而 transform: translateX() 仅触发 composite，能走 GPU 加速。
- 必须给抽屉容器加
will-change: transform（仅在开启动画前设置，关闭后移除，避免内存泄漏） - 避免对
position: static元素直接用translateX——它可能脱离文档流导致布局塌陷，建议包裹层设为position: fixed或absolute - 不要在动画中同时读写
offsetLeft或getBoundingClientRect()，会强制同步回流
touch-action: pan-y 是解决 iOS 滑动冲突的关键
iOS Safari 默认对任何可滚动区域启用全向拖拽，抽屉从右滑入时，手指稍有向下偏移就会触发页面整体滚动，抽屉直接卡住不动——这就是没管 touch-action 的典型表现。
- 抽屉容器（如
<aside class="drawer"></aside>）必须设置touch-action: pan-y（允许纵向滚动，禁止横向拖拽干扰） - 如果抽屉内部有列表需要上下滚动，确保其子容器（如
.drawer__content）设为touch-action: auto，否则内部无法滚动 - 不要设成
touch-action: none——这会让所有触摸事件失效，包括点击按钮
如何让抽屉真正“可访问”而不只是视觉可见
单纯用 display: none 或 visibility: hidden 隐藏抽屉，屏幕阅读器仍可能聚焦到其中元素，或跳过整个区域。必须配合 ARIA 状态与焦点控制。
- 抽屉根元素加
role="dialog"（如果是模态抽屉）或role="complementary"（非模态），并动态绑定aria-hidden="true/false" - 打开时用
element.focus()将焦点移到抽屉第一个可聚焦元素（如button.close），关闭时需手动切回触发按钮 - 按
Esc关闭抽屉时，记得调用triggerBtn.focus()，否则焦点会丢失到body，影响键盘用户连续操作
抽屉最难调的从来不是位移逻辑，而是 touch 事件与原生滚动的竞态、焦点管理与 ARIA 状态的同步时机、以及 transform 在不同 WebView 版本中的渲染差异——这些地方一漏，用户要么点不中按钮，要么滑不动，要么读屏器念出一堆“未命名区域”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
