解决转场卡顿的关键是精准使用 will-change：仅对 transform、opacity 等合成属性设置，配合真实合成动画路径，动态添加并及时清除，避免图层滥用。

要解决复杂转场动画卡顿，关键不是提前“堆图层”，而是让浏览器在动画启动前 刚好升一层、不多不少。will-change 的作用就是这个精准提示——它不强制创建合成层，只告诉浏览器：“接下来几毫秒内，这个元素的 transform 或 opacity 会变，请现在就准备 GPU 资源。”

只对真正参与合成的属性设 will-change

浏览器仅响应以下属性的 will-change 提示：

• transform（位移、缩放、旋转、倾斜）
• opacity（透明度）
• filter 和 backdrop-filter（部分新版本支持）
• contents（慎用，易引发图层爆炸）

对 left、top、width、height、background-color 等触发 Layout 或 Paint 的属性设置 will-change，浏览器直接忽略，还可能增加开销。

必须配合真实且高效的动画路径

will-change 只在动画本身已走合成路径时才起效：

• ✅ 正确：用 transform: translateX(100px) + will-change: transform
• ❌ 无效：用 left: 100px + will-change: left（仍强制回流）
• ⚠️ 注意：若父容器有 overflow: hidden、clip-path 或 contain: paint，可能抑制图层提升

动态添加，动画结束立即清除

will-change 是临时通行证，不是常驻许可证：

• 在交互触发瞬间添加：如 touchstart、click、mouseenter 中通过 JS 添加 class 或设置样式
• 在动画完成时立刻移除：监听 animationend（适用于 @keyframes）或 transitionend（适用于 transition），设 will-change: auto 或清空
• 禁止写死在 CSS 中，例如 .item { will-change: transform; } —— 这会让图层长期驻留，尤其在列表页中极易引发内存飙升和合成器抖动

用 DevTools 验证是否真生效

加了不等于起效。打开 Chrome DevTools：

• 进入 Layers 面板，悬停目标元素，确认是否出现独立图层（带 “GPU memory” 标识）
• 勾选 Rendering → FPS meter 和 Paint flashing，观察动画启动时是否仍有大面积绿色闪烁（说明仍在重绘）
• 图层数应稳定在 3～5 层；若超过 8 层，需排查是否误加、是否批量启用、是否有未清理的残留