用 transform: translateX() 实现侧边栏滑入滑出最稳妥，需配合 visibility 和 pointer-events 控制交互、body 滚动锁定及焦点管理，确保动画流畅、可用性强、兼容全平台。
用 transform: translateX() 实现侧边栏滑入滑出
抽屉式侧边栏的核心就是让元素在视口外隐藏、再平滑移入，transform: translateX() 是最稳妥的选择——它触发硬件加速，动画流畅，且不影响文档流。别用 left 或 margin-left 做位移，那些会触发重排，卡顿明显，尤其在低端安卓 WebView 里。
典型结构是：一个固定定位的 aside（侧边栏），默认 transform: translateX(-100%)，宽度设为具体值（比如 300px），同时加 transition: transform 0.3s ease-in-out；主内容区需要预留遮挡逻辑（比如加 overflow: hidden 防止滚动穿透）。
- 侧边栏必须设
width，不能靠flex或fit-content动态撑开，否则translateX(-100%)行为不可控 - 动画时间建议控制在
0.25s–0.35s，太慢显得迟滞，太快用户来不及反应 - 记得给
body加overscroll-behavior: none，防止 iOS 上滑动侧边栏时触发页面回弹
用 visibility + pointer-events 解决点击穿透和初始化闪现
只靠 transform 隐藏，元素仍可被聚焦、可接收点击——用户点到“看不见”的菜单项上会误触发。必须配合 visibility: hidden 和 pointer-events: none 才算真正“下线”。
但这两者不能和 transform 同时切换（否则动画会中断），得用状态类分层控制：
立即学习“前端免费学习笔记（深入）”；
- 关闭态：
.sidebar--closed { transform: translateX(-100%); visibility: hidden; pointer-events: none; } - 开启态：
.sidebar--open { transform: translateX(0); visibility: visible; pointer-events: auto; } - 关键：
visibility和pointer-events只在类切换瞬间生效，不参与transition，动画纯由transform完成
JavaScript 控制开关时注意事件监听和焦点管理
点击按钮触发侧边栏开合，容易忽略两个细节：一是多次快速点击导致类名反复叠加，二是打开后焦点没落到侧边栏内，对键盘用户不友好。
- 用
classList.toggle()替代add()/remove()，避免状态错乱 - 侧边栏
open后，立即focus()到第一个可聚焦元素（比如首个a或带tabindex="0"的div） - 按
Escape键应关闭侧边栏，需监听document级keydown，并检查当前是否已打开 - 别忘了在侧边栏关闭后，把焦点切回触发按钮（
button.focus()），否则键盘用户会迷失在页面空白处
移动端适配要防 touchmove 穿透和缩放失灵
在 iOS Safari 和部分安卓浏览器里，侧边栏滑出时若内容区还能滚动，手指一划就直接拖动了背景页——这不是 bug，是浏览器默认行为。
- 侧边栏打开时，给
body加position: fixed; width: 100%; top: -${window.scrollY}px，锁住滚动并记录原始位置，关闭时还原 -
meta viewport必须包含user-scalable=no，否则双指缩放可能让侧边栏错位（尤其横屏切回竖屏后） - 不要给侧边栏内部设
overflow-y: auto后又忽略-webkit-overflow-scrolling: touch，iOS 上滚动会粘滞
抽屉动画看着简单，真正在各种机型和系统上稳住，关键是把「视觉位移」「交互可用性」「滚动锁定」三件事拆开压牢——漏掉任意一环，用户就会觉得“卡”“点不到”“关不掉”。
