transition用margin动画必然触发重排，而transform仅走gpu合成层，不触发布局，帧率稳定在58–60fps；必须显式写transition: transform 0.3s ease，禁用all和margin类属性。
transition用margin动画必然触发重排
只要改margin，浏览器就必须重新计算元素及其周围所有元素的几何位置和尺寸——这就是重排（reflow）。每帧都重排，主线程持续满载，帧率直接掉到30fps以下，尤其在中低端安卓机或复杂DOM结构下更明显。常见现象包括：侧边栏推拉卡顿、悬停图标跳行、滚动时动画撕裂。
列表项、导航菜单、弹出框等高频交互区域一旦用margin-left或margin-top做过渡，性能问题几乎不可避免。即使加了will-change: margin也无效，因为浏览器根本不支持对布局属性预创建合成层。
transition用transform只走合成阶段
transform: translateX()这类属性不改变文档流，浏览器会为该元素自动创建独立合成层（前提是没被父层裁剪），后续每一帧只需GPU把图层位移后合成输出，跳过布局和绘制。实测同一设备上，translateX动画帧率稳定在58–60fps，且功耗更低。
关键点在于：
-
transform必须写全，比如transform: translateX(20px)，不能只写translateX(20px)（缺少函数名会被忽略） - 不要混用
top/left和transform，后者会覆盖前者，还可能引发渲染异常 - 移动端Safari对小数位
translateX(0.5px)支持不稳定，建议用整数偏移（如2px、4px）
transition写法本身不是瓶颈，属性选择才是
transition只是声明“哪些属性变化时要加动画”，它不决定性能。真正起决定作用的是你选的属性是否可合成。很多人误以为“transition: all 0.3s”方便，结果all把color、font-size甚至z-index都拖进动画队列，导致意外重绘或遮罩失效。
正确写法必须显式限定：
- ✅
transition: transform 0.3s ease, opacity 0.3s ease - ❌
transition: all 0.3s（尤其在动态注入样式场景下极易出问题） - ⚠️
transition: margin-left 0.3s—— 语法合法，但性能差，应避免
will-change和translateZ(0)不是万能加速器
will-change: transform或transform: translateZ(0)确实能提前创建合成层，但仅在动画开始前一刻添加、结束后立即移除才合理。长期挂载会导致内存占用飙升，尤其在列表项多、侧边栏频繁开关的页面，容易触发浏览器强制回收图层，反而造成首帧卡顿。
真正需要它们的场景其实很窄：比如模态框首次打开时有明显延迟，或iOS Safari上transform动画偶发首帧跳变。日常开发中，优先靠正确使用transform本身解决问题，而不是靠这些“提示语”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
