移动端侧边滑出式按钮面板应使用 transform: translatex() + transition 实现，避免 left 或 display: none；遮罩需与侧边栏同级且 fixed 全屏覆盖；body 滚动禁用须用 position: fixed + scrolly 保存或补滚动条宽度；状态管理需用布尔变量+transitionend 防连点错乱，并支持键盘焦点与无障碍访问。
移动端侧边滑出式按钮操作面板，用 transform: translateX() + transition 是最稳、最兼容的方案，别碰 left 或 display: none ——前者强制重排卡顿，后者直接让动画失效。
为什么必须用 transform: translateX() 而不是 left
移动端 WebView（尤其是安卓旧版）对 left 变更会触发 layout 重排，滑动一卡一卡；transform 走 GPU 合成，不触发布局，动画帧率稳定。实测在低端机上，left 方案平均掉帧 20%+，translateX() 基本能跑满 60fps。
-
translateX(-100%)表示完全左移出视口（不是-300px，后者在不同屏幕宽度下错位） - 必须配
transition: transform 0.3s ease，别写all 0.3s，会意外过渡其他属性 - 侧边栏容器要设
position: fixed，否则在 flex 容器里会被拉伸或塌陷
遮罩层（overlay）为什么不能是侧边栏的子元素
遮罩点击关闭是用户基本预期，但如果把它写成 <div class="sidebar"><div class="overlay"></div></div>，会导致两个问题：一是父容器 overflow: hidden 会把遮罩裁掉，铺不满全屏；二是 z-index 层级混乱，遮罩可能盖不住主内容。
- 遮罩和侧边栏必须是同级兄弟元素，都挂载在
下 - 遮罩样式必须含
position: fixed; top: 0; left: 0; width: 100%; height: 100% - 默认加
pointer-events: none，打开时才设为auto，避免干扰主内容区域的点击
移动端 body 滚动禁用怎么不跳动
直接给 body 加 overflow: hidden 会让页面“向右闪一下”——因为滚动条消失后，body 宽度突然变宽，右侧内容位移。这不是 bug，是浏览器标准行为。
- 正确做法是：侧边栏打开时，给
body加position: fixed; top: -${window.scrollY}px，关掉时再恢复并window.scrollTo(0, scrollY) - 或者更轻量：只加
overflow: hidden，但同时在html上补padding-right: ${scrollbarWidth}px（需 JS 动态测滚动条宽度） - 别忘了在侧边栏关闭后，手动恢复
body.style.position = ''，否则页面会锁死在顶部
快速连点导致状态错乱怎么办
用户手快连点两次“打开”，classList.toggle('is-open') 会执行两次，最终类名被移除，但动画其实只走了一半，视觉和状态就脱节了。
- 用布尔变量
let isSidebarOpen = false记录真实状态，点击前先判断 - 监听
transitionend事件来更新状态，而不是靠定时器“猜”动画结束时间 - 触发后立刻给按钮加
pointer-events: none，动画结束再恢复 - 如果支持键盘操作，记得在打开时把焦点移到侧边栏首个可聚焦元素，并设置
aria-hidden="true"切换主内容区
真正难的不是滑出来，而是滑出来之后——焦点是否落到第一个按钮、ESC 键能否关闭、Tab 键能否在侧边栏内循环、读屏器是否能正确 announce 状态。这些细节漏一个，对部分用户就是不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
