异步转场动画需精准触发合成：用translate3d(0,0,0)、opacity:0.99、动态设置will-change及blur(0.1px)升层，避开top/left/box-shadow等降级属性，并禁用JS读取布局或修改非合成属性，配合contain:strict和@keyframes保障高帧率。
要让异步转场动画真正跑在独立 GPU 图层上，关键不是“加层”，而是精准触发合成、守住合成、避免降级。浏览器不会因为你写了 transform 就自动升层，必须用明确、稳定、时机得当的手段。
真正有效的升层写法
只依赖已被实测跨浏览器（Chrome / Safari / Edge，含 iOS）验证的属性组合：
-
transform: translate3d(0, 0, 0)——最稳，比
translateZ(0)更可靠，尤其在 iOS Safari 上升层成功率更高 - opacity: 0.99——必须是非初始值（如从 1 → 0.99），设为 1 或未声明不生效
-
will-change: transform——仅在动画开始前 1–2 帧动态设置，动画一结束立刻清空：
el.style.willChange = ''；长期挂着会持续占用显存 -
filter: blur(0.1px)——比
blur(0)更保险，零值滤镜部分浏览器会跳过升层逻辑
必须避开的降级陷阱
以下写法看似相关，实则会破坏或阻止合成层生成：
- top / left / width / height——直接触发布局（layout），强制回退到 CPU 渲染流水线
- box-shadow——每次变化都可能引发重绘（paint），无法走纯合成路径
- background-image（尤其大图）——解码和绘制开销大，易导致帧抖动，且不参与合成优化
JS 动画中隐性破坏合成的常见操作
即使 CSS 已成功升层，JS 仍可能在 requestAnimationFrame 循环中把它拖回主线程：
-
读取布局信息：如
el.offsetTop、el.getBoundingClientRect()、getComputedStyle(el).height——触发同步 layout，整帧卡住 -
修改非合成属性：如
el.style.left = '100px'，或通过 class 切换引入left等布局属性——强制降级到 paint 阶段 - 频繁 DOM 查询与重排：在每帧中反复 querySelector、计算 offset，未做缓存或节流
配套保障措施
升层只是起点，还需配合渲染策略才能稳定输出高帧率：
- 转场容器建议启用
contain: strict，隔离样式与布局影响，减少重排范围 - 使用
CSS @keyframes + animation替代 JS 手动更新样式，更易被浏览器识别为可合成动画 - 对长时转场（>300ms），考虑拆分为多个短动画片段，避免单帧任务过重
- 在 DevTools 的 Layers 面板中实时验证：转场期间是否持续存在独立 GraphicsLayer，且无意外合并或消失
