最稳方案是用 transform: translatex() 控制侧边栏抽屉，配合 visibility 显隐、will-change 提升性能、媒体查询响应式、js 实现拖拽回弹，并注意 touch-action 和 backdrop-filter 兼容性。
侧边栏抽屉用 transform: translateX() 最稳
直接用 transform: translateX() 移动侧边栏，比改 left 或 margin-left 更高效、更顺滑。浏览器对 transform 的硬件加速支持好，滚动或动画时不容易掉帧。
常见错误是把侧边栏初始状态设成 display: none，结果点击后无法触发 transition —— 因为 display 不可过渡。必须始终让它在 DOM 中，靠 transform 和 visibility 控制显隐。
- 初始状态：侧边栏
transform: translateX(-100%)，同时加visibility: hidden防止占位干扰 - 展开时：移除
visibility: hidden，再加transform: translateX(0) - 收起时：先
transform: translateX(-100%)，再加visibility: hidden（延时 300ms，匹配 transition 时间） - 别忘了给侧边栏加
will-change: transform，尤其在低端安卓 WebView 里能明显减少卡顿
响应式断点要和媒体查询联动，不能只靠 JS 切换
PC 端常需要“常驻侧边栏”，而移动端才抽屉式。如果只靠 JS 监听窗口大小并 toggle 类名，容易漏掉旋转屏幕、分屏模式、缩放页面等场景。
正确做法是用 CSS 媒体查询兜底，JS 只负责交互逻辑。比如：
@media (min-width: 768px) {
.sidebar-drawer {
transform: translateX(0) !important;
visibility: visible !important;
}
.sidebar-drawer.is-closed {
transform: translateX(0) !important;
}
}
- JS 只管绑定按钮 click、监听
keydown（ESC 关闭）、处理触摸拖拽 - 所有尺寸逻辑交给
@media，避免 JS 重复判断window.innerWidth - 移动端 Safari 对
transform+fixed元素有渲染 bug，建议侧边栏用position: absolute而非fixed，父容器设position: relative
transition: transform 0.3s ease 的 timing-function 别硬套 cubic-bezier
默认的 ease 在抽屉动画里略显拖沓，但盲目换成 cubic-bezier(.25,.46,.45,.94)（类似 Material Design）反而让小屏设备显得“弹跳感过强”。真实体验中，轻量级抽屉更适合快进慢出。
- 推荐用
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1)：进得干脆，出得柔和 - 千万别给
transition加all，否则一旦误加其他可动画属性（比如opacity），会导致意外重绘 - 如果支持 backdrop-filter（如 iOS Safari 16.4+），可以加一层半透蒙层：
.backdrop { backdrop-filter: blur(4px); }，但记得加@supports (backdrop-filter: blur(4px))保护
触摸拖拽关闭时，transform 值必须实时更新，不能只靠 CSS 过渡
纯 CSS 实现不了“手指拖一半松手，自动补全或回弹”，这必须用 JS 计算位移比例并动态设置 style.transform。否则用户拖到一半就松手，侧边栏会卡在中间位置。
- 监听
touchmove，用event.touches[0].clientX计算横向偏移，限制最大位移为-width * 0.8（防止拖太远） - 松手时判断位移是否超过阈值（比如
Math.abs(offset) > width * 0.3），决定是补全展开还是回弹关闭 - 关键细节：拖拽过程中要禁用
transition，否则每次 setStyle 都会触发过渡，导致卡顿；松手后再恢复transition - 桌面端也要模拟：监听
mousedown → mousemove → mouseup，并用preventDefault()阻止文本选中
最易被忽略的是 touch-action：侧边栏容器必须设 touch-action: pan-y，否则 iOS 上垂直滚动会失效；如果侧边栏里有可滚动列表，内部再设 touch-action: pan-y 覆盖即可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
