抽屉菜单必须用 transform: translateX() 而非 left，因 left 触发重排导致卡顿，transform 由 GPU 加速且不干扰文档流；需配合 position: fixed、overflow: hidden、正确 DOM 结构及无障碍焦点管理。
抽屉菜单为什么必须用 transform: translateX() 而不是 left
因为 left 触发重排（reflow），动画卡顿明显；transform 由 GPU 加速，滑动顺滑，且不干扰文档流。移动端尤其明显——用 left 拖拽时掉帧、手指松开后惯性消失，用户感知就是“粘滞”。
关键点：translateX() 必须作用在已定位元素上（position: fixed 或 absolute），否则位移基准错乱；同时需禁用默认滚动穿透（body { overflow: hidden }）。
-
transform: translateX(-100%)表示完全隐藏（左移自身宽度） -
transform: translateX(0)表示完全展开 - 不要用
px值硬编码位移量，改用百分比或vw，适配不同屏幕
HTML 结构怎么写才不踩 DOM 重绘坑
抽屉容器不能嵌套在 <main> 或滚动区域内部，否则 transform 可能被父级 overflow: hidden 截断。正确做法是把它和 <body> 同级，用 z-index 确保层级最高。
示例结构：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
<body> <div id="drawer" class="drawer">...</div> <div id="overlay" class="overlay"></div> <main class="page-content">...</main> </body>
-
#drawer必须设position: fixed+top: 0+height: 100vh -
.overlay用于点击收起，需覆盖整个视口，z-index比抽屉低但比内容高 - 避免把抽屉放在
<header>或<nav>内部——父级transform或perspective会干扰位移效果
如何用 CSS 控制过渡动画与硬件加速
只写 transition: transform 0.3s ease 不够。iOS Safari 对 ease 支持不稳定，容易出现“弹跳”；同时未启用硬件加速时，低端安卓机仍可能掉帧。
- 补全
will-change: transform（仅对抽屉容器），提示浏览器提前优化 - 过渡函数推荐
cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 iOS 弹性动画） - 加
backface-visibility: hidden防止某些安卓机型闪屏 - 不要同时过渡
opacity和transform——两者触发不同渲染层，可能造成撕裂
JavaScript 控制开关时容易漏掉的三个状态
单纯切 classList 不足以保证一致性。常见问题：快速连点两次导致抽屉半开、返回键未监听、键盘焦点未管理。
- 加防抖锁：
if (isAnimating) return，配合transitionend事件重置状态 - 监听
popstate：用户按浏览器返回键时，主动收起抽屉并history.pushState()同步 URL 状态 - 抽屉展开后，自动将焦点移到第一个可聚焦元素（如首项
<a>），关闭时焦点回退到触发按钮——否则键盘用户会迷失
最常被忽略的是：抽屉内容区没设 tabindex="-1"，导致键盘 Tab 键仍能穿透到背后页面内容。这个细节一漏，无障碍就直接失效。
