必须用 transform: translatex() 实现侧边栏抽屉，因其走 gpu 合成层、不触发布局、滑动顺滑且语义清晰；而 left 或 margin-left 会强制同步布局导致卡顿，devtools 标黄警告。
用 transform: translateX() 实现侧边栏抽屉是当前最稳定、性能最好、兼容性最强的方式；其他方案（如 left、visibility + opacity、display: none）要么触发重排卡顿，要么破坏可访问性，要么导致点击穿透。
为什么必须用 transform: translateX() 而不是 left 或 margin-left
直接改 left 或 margin-left 会强制浏览器计算布局（reflow），动画在低端安卓机或 iOS Safari 中明显掉帧，DevTools 里还会标黄警告“forced synchronous layout”。transform: translateX() 走 GPU 合成层，不触发布局，滑动顺滑，且语义清晰——位移只作用于自身坐标系，不依赖父容器定位上下文。
- 侧边栏容器必须设
position: fixed或position: absolute，否则translateX()可能影响文档流，导致主内容跳动 - 别混用
left和transform：比如left: 0; transform: translateX(-100%)，部分 Safari 会忽略位移 - 初始隐藏推荐
transform: translateX(-100%)（按视口宽度算），比-300px更适应响应式；若抽屉宽度固定且需精准对齐，可用transform: translateX(-280px)
:checked + 兄弟选择器实现纯 CSS 抽屉的关键结构
纯 CSS 方案依赖 input[type="checkbox"] 的状态切换驱动样式，核心在于 DOM 结构和选择器写法。一旦结构错位，:checked ~ .drawer 就完全不生效。
-
input必须与抽屉容器（如.drawer）同级，且位于其**之前**；不能嵌套在label或div内 - 必须用
~（通用兄弟选择器），不能用+（相邻兄弟）——因为中间常有label或其它触发元素 -
input隐藏方式要兼顾可访问性：position: absolute; clip: rect(0 0 0 0); pointer-events: none;，而不是单纯display: none - 遮罩层（overlay）必须是
label元素，并设置for指向同一input，才能点击关闭；否则得靠 JS 处理事件冒泡
打开时如何防止背景页滚动穿透
iOS 和部分 Android 浏览器默认允许在抽屉上滑动时，背景页同步滚动——这不是 bug，是浏览器对 body 滚动的默认响应。仅靠 overflow: hidden 在 Safari 15+ 上经常失效。
- 抽屉打开时，给
body加 class（如drawer-open），CSS 中写：.drawer-open { position: fixed; width: 100%; height: 100%; overflow: hidden; } - 同时确保抽屉容器自身有
overflow-y: auto和明确高度（如height: 100vh或min-height: 100vh），否则内容会被截断 - 如果用了 React/Vue，别在组件根节点绑
@click关闭逻辑——遮罩点击要明确区分，且侧边栏内部元素需e.stopPropagation()
动画过渡与焦点管理容易被忽略的细节
动画看起来动了，不代表体验合格。焦点未隔离、键盘 Tab 仍能进入已关闭的抽屉、屏幕阅读器误读，都是常见但隐蔽的问题。
-
transition必须写在抽屉的默认状态里（即未展开时），例如：.drawer { transition: transform 0.3s ease-in-out; }，不能只写在:checked ~ .drawer中 - 别用
opacity控制抽屉本体显隐——它不阻止点击穿透，也不影响Tab焦点流；opacity只适合加在遮罩层或抽屉内部内容区 - 抽屉打开时，应动态设置
aria-hidden="false"并将焦点移到第一个可聚焦元素；关闭时恢复aria-hidden="true"，否则屏幕阅读器仍会朗读不可见内容 - 移动端右滑手势关闭、ESC 键退出等交互，必须用 JS 补全，纯 CSS 无法监听这些事件
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
