侧边栏初始状态必须用transform: translateX(-100%)而非left: -100%，因后者触发重排导致卡顿，前者仅触发GPU加速的合成；且display: none或visibility: hidden会中断transition动画。
侧边栏初始状态为什么必须用 transform: translateX(-100%) 而不是 left: -100%
因为移动端浏览器对 transform 的硬件加速支持更稳定，尤其在低端安卓机上，left 触发重排（reflow），动画卡顿明显；而 translateX 只触发重绘（repaint），且走 GPU 合成层。另外，left 依赖父容器定位（需设 position: relative），稍不注意就失效；transform 作用于自身坐标系，解耦更强。
常见错误现象：left: -100% 在 iOS Safari 下偶尔闪一下才隐藏，或点击后抽屉“跳一下”才展开——基本就是重排抖动导致的。
- 确保侧边栏容器设
position: fixed或absolute，宽高撑满视口 - 初始样式写死：
transform: translateX(-100%);，不要用display: none或visibility: hidden，否则transition不生效 - 过渡属性只写
transform，避免写all：例如transition: transform 0.3s ease-in-out;
如何用 JavaScript 控制 translateX(0) 和 translateX(-100%) 切换
核心是切换一个 class，让 CSS 控制视觉状态，JS 只负责逻辑和时机。别直接操作 style.transform，否则难以维护、无法利用 CSS 过渡、且可能被其他样式覆盖。
使用场景：点击汉堡按钮、点击遮罩层关闭、右滑手势关闭、ESC 键退出。
立即学习“前端免费学习笔记（深入）”；
- 给侧边栏加 class 如
drawer-open，CSS 中定义：.drawer { transform: translateX(-100%); transition: transform 0.3s ease-in-out; } .drawer.drawer-open { transform: translateX(0); } - JS 中用
element.classList.toggle('drawer-open')，而不是setAttribute或style直接赋值 - 记得在打开时禁用
body滚动：document.body.style.overflow = 'hidden';，关闭时恢复；否则 iOS 会透出背景滚动
为什么 transition 有时不触发？三个高频原因
不是代码写错了，而是浏览器没“感知到状态变化”。最常踩的坑都跟 DOM 渲染时机或样式继承有关。
- class 切换后立刻又切回（比如事件绑定重复），导致过渡来不及开始就被中断
- 侧边栏初始未渲染（如用
v-if或*ngIf动态插入），transform值从无到有，浏览器不认为这是可过渡的属性变更 - CSS 中写了
transform: translateX(-100%)，但同时又写了transform: scale(0.9)等其他变换，导致声明冲突，最终计算值不是纯translateX，过渡失效
验证方法：打开 DevTools → Elements → 选中侧边栏元素 → 看 Styles 面板里，transform 是否实时更新为 translateX(0)；如果不是，说明 class 没生效或被覆盖。
手势关闭（右滑）怎么和 CSS transition 兼容
不能靠 touchmove 实时改 transform 值再靠 transition 补帧——transition 是离散状态切换，不支持中间态插值。得用 requestAnimationFrame + 手动设置 transform，关掉 transition，自己控帧。
但有个取巧办法：保持 transition，只在手势结束时做一次跳转。体验略逊于原生滑动，但开发成本低、兼容性好。
- 监听
touchstart记录起始 X 坐标 -
touchmove中计算偏移量deltaX，用element.style.transform = `translateX(${Math.max(-100%, deltaX)}px)`（注意单位，用 px 更稳） -
touchend时判断：如果deltaX > 50，就执行classList.remove('drawer-open')；否则补回translateX(-100%) - 关键：手势过程中临时移除
transition，结束再恢复，避免和 JS 设置冲突
复杂点在于 iOS Safari 对 touch-action: pan-x 的处理不一致，部分机型需在遮罩层加 touch-action: none 才能捕获横向滑动。这个细节容易被忽略，一滑就触发页面缩放或上下滚动。
