必须用transform: translateX()而非left或margin-left，因其触发GPU加速、避免重排卡顿；-100%需配合fixed定位与明确width，否则基准错误；遮罩层需独立transition与事件处理。
移动端侧边栏抽屉化必须用 transform: translateX()，不能靠 left 或 margin-left；否则动画卡顿、iOS 警告、安卓掉帧是常态。
为什么 translateX(-100%) 比 left: -100% 更可靠
浏览器对 transform 和 opacity 做了深度 GPU 加速优化，而 left 或 margin-left 会强制触发 layout（重排），尤其在 Redmi Note 系列或旧款 Galaxy 设备上，实测帧率常跌破 35fps。iOS Safari 更会在 DevTools 控制台标黄警告：“This animation will be degraded to software rendering”。translateX(-100%) 只影响绘制层，不改变盒模型位置，主内容区域无需重新计算布局。
注意：-100% 依赖父容器宽度，而 position: fixed 下父宽常为 auto，导致偏移不准。更稳妥的是用 translateX(-100vw)（左抽屉）或 translateX(100vw)（右抽屉）——视口单位不依赖父级。
transition 必须写在状态 class 上，不能只靠全局声明
只写 transition: transform 0.3s 在根元素或通用选择器上，会导致遮罩层淡入、焦点管理、键盘关闭等交互脱节。实际需要拆分控制：
立即学习“前端免费学习笔记（深入）”；
- 侧边栏容器加
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)（比ease更顺滑） - 遮罩层（
.overlay）加transition: opacity 0.3s, visibility 0.3s——visibility必须显式设时长，否则关闭瞬间消失会引发点击穿透 - 别用
transition-all：它可能意外过渡z-index或scale，拖慢合成层性能
移动端点击穿透和触摸滑动的硬伤怎么绕过
纯 CSS 无法处理滑动关闭，但点击穿透是高频问题：
-
pointer-events: none在 iOS Safari 下有约 100ms 延迟，快速连点仍会穿透到底层按钮 - 遮罩层
click事件必须调用event.stopPropagation()，否则侧边栏内部按钮点击也会冒泡触发关闭 - 触摸滑动需 JS 监听
touchstart/touchmove/touchend：记录起始 X 坐标，松手时位移超 50px 才关闭，过程中必须event.preventDefault()阻止页面滚动 - 别给侧边栏容器加
will-change: transform常驻——只在打开瞬间动态添加，避免合成层长期占用内存
响应式断点里最容易漏掉的三件事
桌面端显示常驻侧边栏、移动端切抽屉，不是简单加个 sm:block 就完事：
- 结构要分离：移动端用
offcanvas或独立div，桌面端用grid或flex布局，混用col-md-3和offcanvas-start会冲突 - 遮罩层必须和侧边栏同级且
z-index低 1，比如侧边栏z-index: 1001，遮罩层只能是1000，否则点击无效 - Tailwind 用户注意：
translate-x-full初始类必须和transition-transform共存，且容器得有明确w-64或inset-y-0 right-0，否则位移基准丢失
真正卡住人的从来不是“怎么写出来”，而是 transform 层级、pointer-events 时机、touchend 阈值这三处边界条件稍一错位，整个交互就断裂。尤其是 iOS Safari 对 fixed + transform 的渲染偶发 bug，will-change 动态加、100vw 替代百分比、遮罩层 visibility 显式设时长——这些不是“可选优化”，是必填项。
