首选transform: translateX()实现侧边栏抽屉，因其触发GPU硬件加速、不触发重排、动画流畅；需配合position: fixed/absolute定位、class控制显隐、aria属性保障可访问性，并注意backdrop层级与移动端touch-action适配。
怎么用 CSS + JS 实现侧边栏抽屉开关？
核心就是控制 transform: translateX() 或 left 位移，配合过渡动画和遮罩层。纯 CSS 可做基础开关，但带状态记忆、响应式适配、键盘支持（如 ESC 关闭）必须加 JS。
常见错误是直接用 display: none 切换——会导致 DOM 突然消失，无法触发 transition；或者忘了给侧边栏设 position: fixed 或 absolute，导致页面内容被挤动。
- 推荐用
transform: translateX(-100%)隐藏，比left: -300px更性能友好（GPU 加速） - 遮罩层（
.overlay）必须放在侧边栏同级、且 z-index 高于主内容但低于侧边栏 - 移动端需加
touch-action: none防止滑动冲突
为什么点击按钮没反应？检查这三处
多数失效源于事件绑定时机或选择器错误。JS 执行时 DOM 没加载完、按钮被动态插入、或用了错误的 class 名是最常踩的坑。
- 确保 JS 在
</body>前执行，或包裹在DOMContentLoaded里 - 按钮的
data-target属性值必须和侧边栏的id完全一致（区分大小写） - 如果侧边栏用 Vue/React 动态渲染，不能靠原生
querySelector绑定——得用事件委托或框架生命周期钩子
transition 动画卡顿或不生效？
不是所有 CSS 属性都支持平滑过渡。display、height、width（从 0 到 auto）都不能直接过渡，会跳变。侧边栏宽度若设为 auto，也容易破坏 transform 动画节奏。
立即学习“前端免费学习笔记（深入）”；
- 只对
transform、opacity、visibility做 transition —— 这三个最稳 - 避免同时过渡多个属性，比如
transition: all 0.3s，容易因其他隐式属性干扰动画 - 侧边栏容器加
will-change: transform可提前提示浏览器优化（但别滥用，可能增加内存开销）
移动端手势滑动关闭怎么加？
原生 touchstart/touchmove 能实现，但要注意 touch 事件默认行为（如页面滚动）会干扰手势识别。
- 监听
touchstart记录起始 X 坐标，touchmove计算偏移量，当偏移 > 50px 且方向向右时触发关闭 - 关键：在侧边栏元素上加
touch-action: pan-y，允许垂直滚动但禁用水平拖拽干扰 - 别忘了在
touchend后补一个松手判断：如果滑动距离不足阈值，就复位；否则彻底关闭
复杂点在于手势与页面内滚动区域（比如侧边栏里有长列表）共存时的冲突处理——这时得在滚动容器上监听 touchmove 并 preventDefault()，但仅限容器内部，不能影响外层抽屉手势。
