View Transition API 页面切换闪烁怎么查：快照时机、伪元素和降级方案

把列表页切到详情页时，如果屏幕先白一下再出现新内容，通常不是动画曲线写错了，而是 View Transition API 的快照时机、页面更新和伪元素动画没有对齐。先把切换包在 document.startViewTransition() 中，再确认 DOM 更新发生在回调里；不支持 API 的浏览器则直接走普通导航，别让过渡逻辑接管业务状态。

先把闪烁现场固定下来

遇到 View Transition API 页面切换闪烁的问题，你可以先搭一个最简 demo 复现定位，再顺着快照生成时机、伪元素命名规则、渐进增强降级这几个方向逐一排查，绝大多数时序导致的异常都能快速定位修复。

闪烁本质上大多是快照生成和 DOM 更新时序不匹配导致的，优先排除业务代码里提前清空 DOM、异步逻辑塞错回调的问题，再核对伪元素命名和过渡范围即可。

先用一个只有列表、详情和返回链接的小页面复现，不要一上来改全局动画。点击列表项后记录三件事：旧页面是否短暂变白、新页面是否出现两次、浏览器后退是否回到正确位置。若只在慢网络或图片较多时出现，优先怀疑新快照生成前的布局变化；若所有设备都闪，优先检查更新回调和伪元素规则。

一个最小的同文档切换可以这样写：

function renderDetail(id) {
  const update = () => {
    history.pushState({ id }, "", `/items/${id}`);
    document.querySelector("#app").innerHTML = detailHtml(id);
  };

  if (!document.startViewTransition) {
    update();
    return;
  }
  document.startViewTransition(update);
}

关键点是 update 只负责一次状态变更。不要在调用前先清空容器，又在回调里重新填充；那会让旧快照已经失去内容，动画只能展示一块空白。

为什么快照时机会制造白闪

过渡启动后，浏览器需要取得旧状态、执行更新回调并取得新状态。旧状态已经被提前清空时，所谓的旧快照就是空容器；新状态如果还依赖异步数据或图片尺寸，则新快照也可能在布局稳定前完成。

排查顺序可以固定为三步：

1. 临时把过渡动画时长改成极短，确认闪烁发生在快照前还是动画期间。
2. 在更新回调前后打印容器高度、标题文本和路由值，确认一次点击只触发一次渲染。
3. 让新内容先拥有稳定的骨架高度，再替换文字和图片，避免新旧快照的布局尺寸差异过大。

如果页面切换跨越真实网络请求，不要把请求本身塞进更新回调并等待它完成。先准备可展示的加载状态，完成一次过渡，再在内容区域内更新数据；这样动画和数据加载的职责是分开的。

用伪元素定位动画残留

View Transition API 会生成过渡树，默认根节点的旧、新快照可能覆盖整个视口。项目中如果同时存在全局 opacity、固定定位遮罩或较高层级的弹层，就可能看到旧页面残影。调试阶段先把规则收窄：

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
  animation-timing-function: ease-out;
}

::view-transition-old(root) {
  animation-name: fade-out;
}

::view-transition-new(root) {
  animation-name: fade-in;
}

需要局部切换时，为列表和详情容器指定稳定名称：

.item-list { view-transition-name: item-list; }
.item-detail { view-transition-name: item-detail; }

同一时刻不能让多个元素共享同一个名称；名称随着列表项数量变化时，也不要用用户输入直接拼接。先为真正需要连续运动的区域分配有限名称，其余内容使用根节点淡入即可。

把支持检测和降级写在同一个入口

渐进增强的边界应该放在点击或导航函数的入口，而不是散落在每个动画规则里。能力检测失败时，保留原始链接和浏览器默认历史行为；能力检测成功时，再决定是否使用增强过渡。

常见问题

View Transition API 能替代路由吗？

不能。它只负责视觉过渡，路由、数据请求、缓存和错误处理仍应由现有应用负责。

为什么只给新元素加动画仍然会闪？

根节点默认过渡仍可能参与合成。先检查根节点伪元素，再为局部区域分配唯一名称。

动画期间可以修改多个区域吗？

可以，但要让这些修改发生在同一个更新回调中，并保证每个命名区域在一次过渡里只出现一次。

不支持的浏览器应该怎么处理？

直接执行原来的导航或渲染路径。动画是增强层，不能改变链接可用性和返回行为。

结语

页面切换闪烁通常是时序问题：旧快照、更新回调、新快照和伪元素动画必须按同一条路径完成。先用最小页面固定现场，再分开检查快照时机、局部命名和能力检测，修复后用慢网络、后退和不支持环境各复查一次，结果比单纯调大动画时长可靠。