纯html无法实现滑出动画，需transition+transform执行，js仅控制状态；用translatex而非left或display避免重排和动画失效，配合will-change、兜底样式及过渡事件处理确保流畅。
纯 HTML 写不出过渡效果——transition 和 transform 才是滑出动画的真正执行者，JS 只负责开关状态。漏掉任一环，点击就“没反应”。
为什么用 transform: translateX() 而不是 left 或 display
直接改 left 会触发重排，低端安卓 WebView 和老版 iOS Safari 动画卡顿明显；用 display: none 则 transition 完全失效，且屏幕阅读器可能误读隐藏内容。
-
transform: translateX(-100%)让元素移出视口左边界，保持在渲染树中，GPU 加速更顺滑 - 必须配对写
transition: transform 0.3s ease-in-out，只写transition不指定属性等于白写 - 移动端建议加兜底：
left: -100vw，防 iOS Safari 渲染异常（尤其 iOS 15.4 之前版本） - 别忘了
will-change: transform，iOS 上能减少闪屏
classList.toggle() 为什么容易出问题？
用户快速连点两次，动画还没结束，类名已切回，导致视觉“卡住”或状态错乱。真实项目里不能只靠 toggle。
- 用布尔变量如
isSidebarOpen显式记录当前状态，点击前先判断 - 监听
transitionend事件来确认动画真正结束，再更新状态或恢复按钮可点击性 - 动画进行中给触发按钮加
pointer-events: none或临时设disabled，防误触 - 如果支持
prefers-reduced-motion，媒体查询里应降级为无动画切换
遮罩层（overlay）为什么总点不中、盖不住？
遮罩被写成侧边栏子元素，或嵌套在 flex 容器里，结果被 overflow: hidden 截断、层级错乱、点击穿透。
-
#overlay和#sidebar必须是的同级兄弟元素 -
#overlay样式必须含：position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; -
#sidebar的z-index至少为1000，确保压在遮罩之上 - 默认设
pointer-events: none，打开时 JS 改为pointer-events: auto，否则点遮罩关不掉
移动端 body 滚动禁用，为什么 overflow: hidden 会导致页面跳动？
滚动条消失后，body 宽度突增，右侧内容右移——Safari 尤其明显。这不是 bug，是浏览器标准行为。
- 不要直接操作
document.body.style.overflow，改用 class 控制：document.body.classList.add('no-scroll') - CSS 中写
.no-scroll { position: fixed; top: -<span id="scroll</span>vh; width: 100%; }（top值取当前window.scrollY） - 关闭抽屉时，不仅要移除
no-scroll，还得window.scrollTo(0, scrollY)恢复原位置 - iOS 软键盘弹出时，
position: fixed抽屉会被顶上去，此时需监听focus事件临时切为position: absolute
最易被忽略的是：动画结束后没清空 transform 内联样式，或没把焦点手动切回触发按钮——键盘用户按 Escape 后会迷失在空白页里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
