View Transitions在路由切换中保留关键元素连续性

列表页点击一张卡片，详情页里的标题和缩略图如果突然换位，用户会感觉自己“跳到了另一个页面”。View Transitions 的价值不是给所有 DOM 加一层炫酷动画，而是把两个路由状态中的同一语义元素接起来。实践上只需要三件事：给需要连续的元素设置唯一名称，用 document.startViewTransition() 包住 DOM 更新，再给不支持 API 的环境保留立即更新的回退。

先把“连续感”缩小到真正稳定的元素

从文章列表进入详情时，通常只有封面、标题和返回位置值得保留连续性。整页内容、加载提示和评论区并不一定对应同一个实体。先给卡片里的图片和标题绑定稳定的业务标识，再在详情页复用同一名称，过渡才有明确语义。

这里的“稳定”不是 CSS 类名稳定，而是同一条数据在旧路由和新路由中的身份稳定。例如商品编号为 sku-42，不要把所有卡片都写成同一个名字：

.product-card[data-id="sku-42"] .thumb,
.product-detail[data-id="sku-42"] .hero {
  /* 同一商品在两个路由状态中共享一个过渡身份 */
  view-transition-name: product-image-sku-42;
}

.product-card[data-id="sku-42"] .title,
.product-detail[data-id="sku-42"] h1 {
  /* 标题也要有独立名称，避免和图片快照互相覆盖 */
  view-transition-name: product-title-sku-42;
}

动态列表可以用行数据生成名称，也可以使用 match-element 让浏览器为选中的元素分配唯一名称。无论采用哪种方式，都要避免同一帧里两个渲染元素拥有相同的自定义名称。

用 startViewTransition 把路由更新包起来

切换的关键顺序是“先触发快照，再更新 DOM”。把路由状态更新放进回调，浏览器才能拿到旧状态和新状态。下面的封装不依赖具体路由库：数据已经准备好时更新详情；数据未准备好时，先显示页面级加载状态也可以。

function renderRoute(nextRoute) {
  // 统一更新入口，让不支持 API 的浏览器也能完成导航
  const update = () => {
    currentRoute = nextRoute;
    renderPage(nextRoute);
  };

  // 用户偏好减少动效时，仍然更新内容，只关闭视觉动画
  const reduceMotion = window.matchMedia(
    "(prefers-reduced-motion: reduce)"
  ).matches;

  if (!document.startViewTransition || reduceMotion) {
    // fallback 必须是同步可用的真实路由更新
    update();
    return;
  }

  const transition = document.startViewTransition({
    // 重要：DOM 变化只能放在 update 回调里
    update,
    types: [nextRoute.direction === "back" ? "back" : "forward"]
  });

  transition.finished.catch(() => {
    // 动画失败不回滚已经完成的 DOM 更新
    console.info("view transition skipped; route is already updated");
  });
}

回调返回 Promise 时，过渡会等回调完成后再进入动画阶段；如果回调拒绝，过渡会被放弃，但路由代码仍应把数据和 DOM 状态处理完整。finished 适合做清理或埋点，不应成为导航成功的唯一条件。

命名关键元素，但不要让动画绑架路由

最容易踩坑的是把 view-transition-name 当成普通 class 使用。一个渲染状态里如果有两个元素同时使用同名值，transition.ready 可能拒绝，浏览器会跳过这次动画。因此列表页需要先清理旧名称，详情页也不要给多个候选卡片永久设置同一个固定名称。

过渡样式可以只改命名元素，根页面继续使用默认淡入淡出；同时为减少动效用户降低动画时间：

::view-transition-old(product-image-sku-42),
::view-transition-new(product-image-sku-42) {
  /* 图片尺寸变化时保持内容完整，避免被拉伸 */
  object-fit: cover;
}

@media (prefers-reduced-motion: reduce) {
  /* 仍保留状态切换，只移除快照动画 */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: 1ms !important;
  }
}

如果页面是跨文档导航，还要让同源的旧页面和新页面都通过 CSS 的 @view-transition 规则选择加入；这和 SPA 中手动调用 startViewTransition() 是两条路径，不能只在一个页面配置。

上线前按结果而不是按动画检查

最终判断标准是用户能否继续完成“列表—详情—返回”这条路径，而不是动画是否每次都出现。图片命名、数据加载、焦点恢复和滚动位置仍然属于路由系统；View Transitions 只负责把两个已存在的视觉状态连接得更自然。

相关问题

view-transition-name 可以在多个元素上复用吗？

同一渲染状态里不要复用同一个自定义名称。需要批量处理列表时，应使用 match-element 或为每个数据实体生成不同的名称。

不支持 View Transitions 的浏览器怎么办？

直接执行与过渡回调相同的 DOM 更新。能力检测只决定是否动画，不应该决定路由是否可用。

为什么调用后动画没有出现？

先检查更新回调是否拒绝、页面是否处于隐藏状态，以及命名元素是否重复；这些情况都可能让过渡被跳过。

减少动效时应该禁用整个页面吗？

不需要。保留内容和焦点变化，只将快照动画设为极短或关闭，让用户仍能理解路由已经完成。