要让 Vue 动画稳定跑在 60FPS，核心是交由 GPU 处理并避开主线程重排与样式强读，关键靠属性选择（仅用 transform/opacity）、精准控制 will-change 动态启停图层、用 requestAnimationFrame 对齐渲染帧，并通过 Chrome DevTools 验证图层与帧耗时。
要让 Vue 动画稳定跑在 60FPS，核心不是堆效果，而是把动画交给 GPU 处理，同时避开主线程的布局重排和样式强读。关键在属性选择、图层控制和渲染节奏三者配合。
只对 transform/opacity 做动画
GPU 加速只对特定 CSS 属性真正有效。浏览器能将 transform（如 translateX、scale、rotate）和 opacity 的变化直接交由 GPU 合成，不触发 Layout 或 Paint。
- ✅ 推荐写法：
transform: translateX(100px);或opacity: 0.5; - ❌ 避免写法：
top: 100px;、margin-left: 100px;、width: 200px;——这些会强制重排，再快的设备也难稳 60FPS - ⚠️ 注意：
translateZ(0)或will-change: transform本身不加速，只是“提示”；如果动画属性本身不友好，加了也没用
精准启用 will-change，动态管理图层
will-change 是给浏览器的预告信号，不是开关。它告诉浏览器：“这个元素接下来要频繁变，请提前建好独立合成层”。但长期开着会浪费 GPU 内存。
- 只在动画开始前设：
el.style.willChange = 'transform'; - 动画结束后立刻清空：
el.style.willChange = 'auto'; - 不要全局写
will-change: transform到 CSS 类里——尤其别用在列表项或滚动区域，容易引发图层爆炸 - 现代框架如 Varlet、BewlyBewly 都采用 JS 动态控制，而非静态声明
用 requestAnimationFrame 对齐渲染帧
即使属性和图层都对了，JS 如果“乱改状态”，照样丢帧。Vue 的 <transition> 默认已做部分优化，但复杂交互仍需手动对齐。
立即学习“前端免费学习笔记（深入）”；
- 状态切换（比如点击弹窗）时，把 class 切换或样式更新包裹在
requestAnimationFrame中 - 高频操作（如快速切换 Tab）加节流：确保每 16ms 最多响应一次动画触发
- 绝对避免在 enter/leave 钩子中读取
offsetHeight、getComputedStyle等会强制同步 Layout 的操作
验证是否真达标：用 DevTools 看本质
别信肉眼感觉，用 Chrome 工具确认 GPU 层是否生效、主线程是否空闲：
- 打开 Rendering 面板 → 勾选 Layer borders：动画元素应有清晰独立边框；勾选 Paint flashing：闪烁区域应极小（仅内容变化处）
- 用 Performance 面板录制动画过程：看每帧耗时是否稳定 ≤16.67ms，主线程是否长时间空闲
- Vue Devtools 的 Performance 标签页也能辅助定位过渡组件的耗时瓶颈
