抽屉动画必须用 transform: translatex() 而非 left 或 margin-left，因其触发 gpu 加速、不触发重排，动画流畅；需配合 position: fixed、transition: transform 0.3s ease-in-out 及遮罩层正确 z-index 设置。
抽屉动画用 transform 还是 left？
用 transform: translateX() 是唯一靠谱选择。直接改 left 或 margin-left 会触发 layout，动画卡顿，尤其在移动端。浏览器对 transform 和 opacity 的优化最成熟，GPU 加速也只对这两者生效。
- 动画必须作用在侧边栏容器上，不是它的子元素
- 初始状态设为 transform: translateX(-100%)（完全隐藏）
- 展开时改为 transform: translateX(0)，收起再切回去
- 配合 transition: transform 0.3s ease-in-out，别漏写 ease-in-out，否则生硬
如何避免遮挡内容又不破坏文档流？
侧边栏必须用 position: fixed，不能用 absolute。
- fixed 脱离文档流，不会挤压主内容，也不会随滚动消失
- 设置 top: 0、height: 100vh、width: 280px（按需调整）
- 主内容区域需加 padding-left: 280px（展开时）或通过 JS 切换 class 控制，否则文字会被遮住
- 关键细节：z-index 至少设为 1000，否则可能被其他 fixed 元素盖住
点击遮罩层关闭时，如何防止误触背景内容？
遮罩层（overlay）不是可有可无的装饰，它是交互安全的关键。
- 遮罩层必须和侧边栏同级，且 z-index 比侧边栏低 1（如侧边栏 z-index: 1001，遮罩层 z-index: 1000）
- 宽高设为 100vw 和 100vh，背景半透明：background: rgba(0,0,0,0.5)
- 绑定 click 事件时，只监听遮罩层本身，不要监听 document，否则点击侧边栏内部也会关闭
- 更稳妥的做法：在遮罩层 click 回调里调用 event.stopPropagation()，再执行关闭逻辑
移动端触摸滑动关闭怎么兼容？
纯 CSS 做不了滑动关闭，必须靠 JS 监听 touchstart/touchmove/touchend。
- 记录起始 X 坐标，拖动时实时计算位移，更新 transform: translateX()
- 松手时判断位移是否超过阈值（如 50px），超过则关闭，否则回弹
- 注意：拖动过程中要禁用默认滚动行为（event.preventDefault()），否则页面跟着滑
- 不推荐用第三方库（如 Hammer.js），简单场景原生事件足够，避免引入额外体积
position: fixed，不能用 absolute。
- fixed 脱离文档流，不会挤压主内容，也不会随滚动消失
- 设置 top: 0、height: 100vh、width: 280px（按需调整）
- 主内容区域需加 padding-left: 280px（展开时）或通过 JS 切换 class 控制，否则文字会被遮住
- 关键细节：z-index 至少设为 1000，否则可能被其他 fixed 元素盖住
点击遮罩层关闭时，如何防止误触背景内容？
遮罩层（overlay）不是可有可无的装饰，它是交互安全的关键。
- 遮罩层必须和侧边栏同级，且 z-index 比侧边栏低 1（如侧边栏 z-index: 1001，遮罩层 z-index: 1000）
- 宽高设为 100vw 和 100vh，背景半透明：background: rgba(0,0,0,0.5)
- 绑定 click 事件时，只监听遮罩层本身，不要监听 document，否则点击侧边栏内部也会关闭
- 更稳妥的做法：在遮罩层 click 回调里调用 event.stopPropagation()，再执行关闭逻辑
移动端触摸滑动关闭怎么兼容？
纯 CSS 做不了滑动关闭，必须靠 JS 监听 touchstart/touchmove/touchend。
- 记录起始 X 坐标，拖动时实时计算位移，更新 transform: translateX()
- 松手时判断位移是否超过阈值（如 50px），超过则关闭，否则回弹
- 注意：拖动过程中要禁用默认滚动行为（event.preventDefault()），否则页面跟着滑
- 不推荐用第三方库（如 Hammer.js），简单场景原生事件足够，避免引入额外体积
touchstart/touchmove/touchend。
- 记录起始 X 坐标，拖动时实时计算位移，更新 transform: translateX()
- 松手时判断位移是否超过阈值（如 50px），超过则关闭，否则回弹
- 注意：拖动过程中要禁用默认滚动行为（event.preventDefault()），否则页面跟着滑
- 不推荐用第三方库（如 Hammer.js），简单场景原生事件足够，避免引入额外体积
侧边栏动画看着简单，但 transform 的层级、遮罩的点击范围、触摸事件的边界处理，三处稍一疏忽就导致体验断裂。尤其是 iOS Safari 对 transform + fixed 的渲染偶尔有 bug，建议始终用 will-change: transform 做提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
