必须用transform: translatex()而非left或margin-left，因其不触发重排、走gpu合成器、动画顺滑；需设固定宽度、避免vw混用、配合overscroll-behavior和aria-hidden保障体验与可访问性。
必须用 transform: translateX()，不能用 left 或 margin-left —— 否则 iOS 卡顿、安卓掉帧、动画跳变是大概率事件。
为什么 translateX(-100%) 比 left: -100% 更可靠
改 left 会触发浏览器 layout（重排），尤其在 Safari 和旧版 WebView 中，抽屉滑出时经常“闪一下”或“跳一帧”；translateX() 只走合成层，GPU 加速，位移过程完全不干扰文档流。
-
translateX(-100%)是按自身宽度计算位移，前提是侧边栏有明确width（如width: 280px），否则 -100% 会按视口宽算，小屏下直接飞出屏幕 -
left: -100%依赖父容器position: relative，一旦嵌套层级变化或 flex 布局压缩，偏移就失效 - iOS Safari 对非
transform/opacity的动画属性会抛黄色警告（DevTools 可见），left正中靶心
transition 写在哪？为什么不能只写 transition: all 0.3s
把 transition 写在默认状态上看似省事，但实际会漏掉遮罩层淡入、焦点切换、键盘 Esc 响应等关键路径；更糟的是，all 会让所有属性都参与过渡，比如意外修改了 z-index 或 visibility，动画就中断或闪屏。
- 只写
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1)在侧边栏元素上，比默认ease更顺滑 - 遮罩层单独加
transition: opacity 0.3s, visibility 0.3s——visibility必须显式声明时长，否则关闭瞬间消失，导致点击穿透 - 别在
:root或通配符选择器里写全局transition，容易污染按钮、卡片等其他动效
移动端点击穿透和滚动锁定怎么防
遮罩层点一下没反应、或者点了两次才关抽屉，大概率是 pointer-events: none 没生效，或 .overlay 没占满整个视口。
-
.overlay必须设position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;—— 不能用100%，它相对父容器，不是视口 - 打开抽屉时，同步执行
document.body.style.overflowX = 'hidden'，关闭后设为空字符串（不是'auto'），否则 Safari 会残留 scrollX 导致页面错位 - 主内容区加
aria-hidden="true"，抽屉内加tabindex="0"并用 JS 实现焦点陷阱（focus trap），否则键盘用户 Tab 会漏到背后去
响应式断点与 DOM 结构怎么解耦
纯靠媒体查询控制 display 或 transform，在 iPad 横竖屏切换时极易卡在半开状态——因为 CSS 媒体查询响应有延迟，而 JS 切换类能立刻同步。
- HTML 中给侧边栏加初始类：
class="sidebar sidebar--drawer-closed" - JS 用
matchMedia('(max-width: 768px)')判断当前是否该启用抽屉，再切换sidebar--drawer-open - CSS 只负责定义：
.sidebar--drawer-open { transform: translateX(0); }，不嵌套媒体查询 - 大屏下直接覆盖为
position: static; transform: none;，并移除transition，避免悬停等交互误触发位移
最易被忽略的其实是 will-change: transform 和 backface-visibility: hidden —— 它们不常写，但在低端设备或长列表抽屉里，真能压住那一丝卡顿。还有，translateX(-100%) 的 -100% 必须绑定自身宽度，别混用 vw 或没约束的百分比，iOS Safari 渲染 vw 有延迟，滑动瞬间容易抽搐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
