translateX动画不丝滑是因未触发GPU合成层：需加transform: translateZ(0)、避免opacity混用、overflow:hidden等降级操作，并用requestAnimationFrame优化touch拖拽，关闭后清空transform并设display:none防点击穿透。
直接用 transform: translateX() 实现抽屉导航，动画本身就能丝滑——但前提是它真正在 GPU 上跑，而不是被浏览器悄悄降级回 CPU 渲染。
为什么 translateX 有时不丝滑？
写了 transform: translateX(-100%)，加了 transition: transform 0.3s ease，但真机上一拖就卡、松手后惯性消失、快速开关还跳帧。这不是代码写错了，而是合成层没建起来。
-
translateX()本身不自动触发硬件加速；浏览器只在元素满足“合成层条件”时才交由 GPU 处理 - 常见破坏合成层的操作：
opacity动画和transform混用、父容器设了overflow: hidden或border-radius、抽屉内容里有未优化的iframe或大量图片 - Android 低版本 WebView（如微信 7.0.19 及更早）会把
translateX(-100%)当成无效值，必须改用像素单位（如translateX(-280px)）
如何确保 translateX 走 GPU？
不是所有设备都认 will-change: transform，尤其旧版 WebView 和部分安卓系统。稳妥做法是组合使用、按需降级。
- 给抽屉容器加
transform: translateZ(0)—— 兼容性最好，现代浏览器也认 - 若需更强提示，叠加
will-change: transform，但仅对频繁动画的抽屉启用，别全局加 - iOS Safari 中，加
backface-visibility: hidden防止文字渲染错位或闪烁 - 避免在抽屉内用
filter、mask或clip-path，这些属性会让合成层失效
移动端 touch 拖拽怎么不跳变？
直接在 touchmove 里改 element.style.transform，JS 执行 + 样式计算 + 布局重排全挤在一起，必然卡顿。用户一拖，位移就跟不上手指。
立即学习“前端免费学习笔记（深入）”；
- 监听
touchstart记下起始clientX，touchmove中只算 Δx，不累积更新 - 用
requestAnimationFrame包裹位移更新，确保每帧只执行一次样式写入 - 位移值始终用
transform: translateX(${x}px)，绝不用left或margin-left—— 后者强制触发 Layout - 抽屉宽度必须是固定值（如
width: 280px），否则translateX(-100%)在不同屏幕下行为不一致
关闭后点击穿透怎么防？
很多人关抽屉只做两件事：加 transform: translateX(-100%)、设 transition。但 DOM 还在、样式还在、z-index 还在，iOS Safari 就会把点击透过去，点中底下的按钮。
- 动画结束后，显式清空
transform并设display: none或visibility: hidden - 别只依赖
transitionend事件 —— 快速连点时容易丢失，加setTimeout兜底（比如300ms后强制清理） - 如果抽屉里有
input，关闭前手动调input.blur()；有iframe，记得remove()或src = '' - 遮罩层（
.overlay）必须设pointer-events: auto，且z-index高于主体但低于抽屉头部的关闭按钮
真正难的从来不是写出 translateX，而是让每个环境都按你预期的方式合成图层——iOS 的渲染队列、微信 WebView 的解析偏差、甚至 Chrome DevTools 里看到的“60fps”，在真机弱网下可能全都不作数。
