html抽屉即侧滑面板的通用实现方式，核心是用transform:translatex()替代left/margin-left以启用gpu加速，配合will-change、touch-action:pan-y及aria可访问性优化。
HTML抽屉不是侧滑面板的“升级版”，它就是侧滑面板的通用实现方式——所谓“改善”，本质是把粗糙的 left 或 margin-left 动画，换成符合现代浏览器渲染机制的 transform: translateX() + will-change + touch-action 组合方案。
为什么用 transform: translateX() 而不是 left
改 left 会触发 layout → paint → composite 全流程，中低端安卓机上动画掉帧明显；translateX() 只走 composite 层，GPU 加速，滑动顺滑。但注意：translateX() 对 position: static 元素无效，必须配合 position: fixed 或 position: absolute 使用，否则可能脱离文档流导致布局塌陷。
- 别在动画过程中读取
offsetLeft或getBoundingClientRect()，会强制同步回流 -
will-change: transform要动态加/删：开启动画前 set，关闭后 remove，长期挂着会导致内存泄漏 - 某些 Android WebView（如旧版 UC 内核）对
transform+will-change同时启用有渲染异常，表现为闪屏或卡顿，可先去掉will-change观察
touch-action: pan-y 是 iOS 滑动不卡的关键
iOS Safari 默认允许全向拖拽，抽屉从右滑入时，手指稍一偏下，就会触发页面整体纵向滚动，抽屉直接“被抢走”手势、停住不动。这不是 bug，是默认行为。
- 抽屉根容器（如
.drawer）必须设touch-action: pan-y - 若抽屉内部有可滚动列表，其子容器（如
.drawer__content）要单独设touch-action: auto，否则内部无法上下滚 - 绝对不要设
touch-action: none——这会让所有触摸事件失效，包括点击按钮
纯 CSS 方案比 JS 更稳，但细节不能漏
用 <input type="checkbox"> + :checked ~ .drawer 实现开关，无需 JS 就能避免状态同步问题，但极易因 HTML 结构或样式疏忽失效。
-
<label for="drawer-toggle"></label>的for值必须和<input id="drawer-toggle">完全一致（大小写敏感） -
<label></label>内不能嵌套<button></button>或<a></a>，否则 click 事件被拦截，菜单点一下就收 - 移动端点击不灵敏？给
<label></label>加cursor: pointer和-webkit-tap-highlight-color: transparent，并确保尺寸 ≥ 44×44px - 菜单初始状态必须用
transform: translateX(-100%)，不能用display: none，否则 transition 不生效
最难调的从来不是“怎么让它动起来”，而是 touch 事件与原生滚动的竞态、焦点管理与 ARIA 状态的同步时机、以及 transform 在不同 WebView 中的渲染差异——这些地方一漏，用户要么点不中按钮，要么滑不动，还查不出错在哪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
