抽屉菜单必须用 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></main> 或滚动区域内部，否则 transform 可能被父级 overflow: hidden 截断。正确做法是把它和 同级，用 z-index 确保层级最高。

示例结构：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

  <div id="drawer" class="drawer">...</div>
  <div id="overlay" class="overlay"></div>
  <main class="page-content">...</main>

• #drawer 必须设 position: fixed + top: 0 + height: 100vh
• .overlay 用于点击收起，需覆盖整个视口，z-index 比抽屉低但比内容高
• 避免把抽屉放在 <header></header> 或 <nav></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></a>），关闭时焦点回退到触发按钮——否则键盘用户会迷失

最常被忽略的是：抽屉内容区没设 tabindex="-1"，导致键盘 Tab 键仍能穿透到背后页面内容。这个细节一漏，无障碍就直接失效。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！