移动端抽屉式侧边栏的核心是“不卡、不闪、手势跟手”，须用 transform: translatex() 避免重排，结合 touch 事件实现真跟手滑动，并优化 paint 与滚动穿透。
移动端抽屉式侧边栏的核心不是“仿原生”，而是“不卡、不闪、手势跟手”——CSS transform + transition 能做到，但必须绕开重排重绘和 touch 事件误判。
为什么不能只用 left 或 margin-left 动画？
这类属性会触发 layout（重排），在低端安卓机上极易掉帧；滑动过程中若页面有滚动或输入框聚焦，还可能被浏览器强制中断动画。iOS Safari 对非 transform 的位移动画也更保守，常出现“一卡一卡”的现象。
实操建议：
- 始终用
transform: translateX()控制侧边栏显隐，它走合成层（compositor layer），不触发布局计算 - 避免同时设置
transition在多个属性上（如transform+opacity），优先只过渡transform，opacity单独加will-change: opacity（仅必要时） - 给侧边栏容器加
backface-visibility: hidden，防止部分安卓 WebView 渲染错位
transform 动画卡顿？检查是否意外触发了 paint
即使用了 translateX，如果侧边栏内部有大量图片、阴影（box-shadow）、或未优化的 border-radius，仍可能让每帧 paint 时间飙升，表现为“拖影”或“滑动滞后”。
实操建议：
- 侧边栏内容区域设
overflow: hidden，禁止内部滚动干扰主视口 touch 事件 - 移除不必要的
box-shadow，改用filter: drop-shadow()（硬件加速更好） - 图片用
image-rendering: -webkit-optimize-contrast防止缩放模糊导致重绘加重 - 关键节点加
transform: translateZ(0)强制提升为独立图层（慎用，过多图层反而增加内存压力）
如何让滑动手势真正“跟手”，而不是等松手才动？
纯 CSS transition 是声明式动画，只能做“开/关”两态切换，无法响应手指实时位移。要实现真·跟手，必须结合 JavaScript 监听 touchstart/touchmove，动态更新 transform: translateX() 的值，并在 touchend 后补一个带缓动的 transition 完成收尾。
实操建议：
- 在
touchstart记录初始clientX和当前translateX值 - 在
touchmove中计算偏移量，直接写入element.style.transform = `translateX(${x}px)`（注意：不要用 class 切换） - 在
touchend判断滑动距离是否 > 80px 或速度 > 0.3px/ms，决定是“吸附展开”还是“回弹关闭” - 回弹时再启用
transition，例如element.style.transition = 'transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1)'
兼容 iOS 15+ 的 overscroll-behavior 与侧边栏冲突怎么办？
iOS 15 起默认开启滚动穿透（scroll chaining），当侧边栏打开时，若用户在侧边栏内向上/下滑动到底部，会“漏出”主页面继续滚动，破坏遮罩感。这不是 transform 的问题，而是滚动行为未隔离。
实操建议：
- 侧边栏容器加
overscroll-behavior: contain，阻止滚动传递 - 同时给 body 加
position: fixed; width: 100%; height: 100%（仅在侧边栏打开时），防止页面抖动 - 慎用
touch-action: none—— 它会禁用所有原生手势，包括 pinch-zoom 和长按选中，应只作用于侧边栏内非交互区域
真正难的不是写出能动的抽屉，而是让它的开启/关闭在各种机型上都像系统原生一样“没存在感”。很多团队卡在 60fps 边缘，其实就差一行 will-change: transform 或一次多余的 getBoundingClientRect() 调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
