抽屉侧边栏必须用 transform:translateX 而非 left 或 margin-left，因其触发 GPU 加速、不触发重排，动画更流畅；需配合 will-change: transform（动态添加）、position: fixed/absolute、明确 width 及合理贝塞尔曲线，并解决移动端点击穿透、焦点管理与可访问性问题。
抽屉侧边栏为什么必须用 transform:translateX 而不是 left 或 margin-left
因为 transform:translateX 触发 GPU 加速，动画更流畅，且不触发重排（reflow），尤其在低端 Android 设备上能明显避免卡顿。用 left 或 margin-left 会强制浏览器反复计算布局，滚动或动画时容易掉帧，甚至出现白屏闪烁。
关键点：transform 只影响绘制层（paint layer），而 left 改变的是盒模型位置，牵一发而动全身。
- 务必给抽屉容器加
will-change: transform（仅在激活时添加，避免常驻开销） - 不要对
position: static元素直接用translateX——它得有独立渲染上下文，建议设position: fixed或position: absolute - 避免在
translateX动画中同时修改opacity以外的其他属性（比如height、display），否则可能破坏合成层
如何用纯 CSS 控制抽屉显隐（不依赖 JS 切换 class）
可以利用 :checked + <input type="checkbox"> 隐藏控件实现零 JS 切换，适合轻量场景。核心是把 checkbox 放在 DOM 前置位，用相邻兄弟选择器 ~ 控制抽屉和遮罩层。
<input type="checkbox" id="drawer-toggle" class="drawer-toggle">
<label for="drawer-toggle" class="drawer-overlay"></label>
<aside class="drawer">...</aside>
.drawer-toggle:checked ~ .drawer-overlay,
.drawer-toggle:checked ~ .drawer {
visibility: visible;
opacity: 1;
}
.drawer-toggle:checked ~ .drawer {
transform: translateX(0);
}
.drawer {
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.drawer-overlay {
transform: translateX(-100%);
transition: opacity 0.3s, transform 0.3s;
}
-
transform: translateX(-100%)的基准是自身宽度，不是父容器——确保抽屉设了明确width（如width: 280px）或max-width，否则 -100% 行为不可控 -
cubic-bezier(0.34, 1.56, 0.64, 1)是“缓出过冲”曲线，比默认ease更有抽屉感；但 iOS Safari 对高 y 值贝塞尔支持不稳定，可降级为ease-out - 遮罩层
.drawer-overlay必须与抽屉同级且紧跟其后，否则~无法命中
移动端点击穿透（click-through）问题怎么破
抽屉展开后，背后内容仍可被点击——常见于 position: fixed 抽屉未覆盖全屏、或 z-index 层级错乱。本质是事件冒泡未被阻断，且遮罩层未真正捕获点击区域。
立即学习“前端免费学习笔记（深入）”；
- 遮罩层必须设
top: 0; right: 0; bottom: 0; left: 0;，不能只靠width: 100%; height: 100%（后者受父容器限制） -
z-index要形成明确层级：遮罩层（比如z-index: 999）＞抽屉（z-index: 1000）＞主内容（z-index: 1），且三者不能在同一 stacking context 下 - 抽屉容器加
pointer-events: none，内部可点击区域（如菜单项）单独设pointer-events: auto——这样既防穿透，又保留交互 - iOS 上
touch-action: pan-y加在遮罩层可阻止误触背景滚动
键盘焦点与可访问性（a11y）绕不开的细节
纯 CSS 实现的抽屉默认不管理焦点流，用户按 Tab 键会跳到抽屉外的元素，屏幕阅读器也无法感知状态变化。这不是“锦上添花”，而是合规硬需求。
- 抽屉打开时，用 JS 给
<input type="checkbox">添加aria-expanded="true"，并同步设置aria-hidden="false"在抽屉根元素上 - 抽屉关闭后，焦点必须手动
return到触发按钮（label[for="drawer-toggle"]），否则键盘用户会迷失 - 抽屉内第一个可聚焦元素（如首项
a或button）需在打开后自动focus()，且支持Esc关闭 - 别忽略
prefers-reduced-motion：用@media (prefers-reduced-motion: reduce)关掉动画，只做显隐切换
transform 动画看着简单，但真要稳稳落地，得在设备兼容、手势响应、焦点管理和性能之间反复调平。最常漏掉的，其实是遮罩层的 touch-action 和焦点返回逻辑——这两处一松，移动端体验就塌半边。
