只写transform: translateX()不一定走GPU，因浏览器需显式信号（如will-change: transform或translateZ(0)）才创建合成层；否则仍可能降级CPU渲染，且受父级样式、设备兼容性等限制。
为什么只写 transform: translateX() 不一定走 GPU
很多人以为只要用了 translateX() 就自动硬件加速，结果动画一卡顿就懵了。浏览器不会无条件升层——它得判断这个元素是否值得单独建一个合成层（composite layer）。纯 transform: translateX() 只是“可能”触发 GPU，但没强制信号，尤其在静态或低频动画场景下，大概率还是走 CPU 渲染。
- 必须显式告诉浏览器：“这个元素要频繁动”，靠
will-change: transform或transform: translateZ(0) -
translateZ(0)兼容性更好，iOS Safari 和旧 Android WebView 都认；will-change在微信 7.0.20 以下有 bug，慎用 - 别给所有抽屉、加载图标都加，合成层多了显存涨，低端机反而更卡
translate 位移 + transition 的正确写法
过渡动画必须只作用于 transform，不能写成 transition: all 或 transition: left。后者会触发 layout，直接掉帧。
- 初始态和目标态的
transform值要完整声明：比如初始写transform: translateX(0) rotate(0deg)，激活态就得写transform: translateX(-280px) rotate(0deg)，否则 rotate 会从none插值，跳变 - 移动端避免用百分比位移（如
translateX(-100%)），Android WebView 解析不稳定；优先用固定像素，比如translateX(-280px) - 别在
touchmove里直接改style.transform，要用requestAnimationFrame批量更新，否则拖拽跟手差
关闭抽屉后点击穿透怎么破
动画结束时只靠 transitionend 重置样式，容易丢事件，尤其快速连点。DOM 还在、transform 值残留，底层按钮就被误触。
- 动画结束后，显式清空
transform并配合display: none或visibility: hidden - 加 300ms 超时兜底：
setTimeout(() => { el.style.transform = ''; el.style.display = 'none'; }, 300) - 抽屉里有
<input>或<iframe></iframe>？关闭时手动调el.blur()和el.remove()，防止焦点卡住或资源泄漏
如何确认硬件加速真生效了
写了 translateZ(0) 不等于 GPU 在干活。得看浏览器有没有真建独立图层。
立即学习“前端免费学习笔记（深入）”；
- Chrome DevTools → More Tools → Rendering → 勾选
Layer Borders：绿色边框 = 成功升层 - 没绿框？常见原因：父容器有
overflow: hidden/opacity: 0.99/filter，压制了子元素提层 - iOS Safari 推荐用
translateZ(0)而非translate3d(0,0,0)，更轻量；Android 4.4 以下根本不支持合成层，别硬上
真正难的不是写对那一行 CSS，而是每一步都得考虑真实设备的兼容边界、内存水位和用户操作节奏。写完记得真机跑一遍，别只信模拟器。
