View Transitions为页面切换保留元素对应关系的实现方法

页面切换时，真正影响体验的往往不是动画有多花，而是读者能不能认出“刚才那张卡片”已经变成了“现在的详情”。在同一个 document 内，可以把 DOM 更新交给 document.startViewTransition()，再给需要保持对应关系的元素设置唯一 view-transition-name。浏览器会保存更新前的快照，执行回调里的 DOM 更新，再用新旧视图完成过渡；不支持该 API 时，仍然直接更新页面。

用 startViewTransition 包住同一次 DOM 更新

同文档过渡的关键不是把路由跳转“延迟”一下，而是让浏览器明确知道哪一次 DOM 变化属于同一组视图切换。下面的例子把文章列表切换为详情状态，回调内部只做状态更新；兼容性不足时调用同一个更新函数即可。

const app = document.querySelector('#app');

function showDetail(article) {
  // 先把真正的 DOM 更新收口，动画和无动画路径共用它。
  const update = () => {
    app.innerHTML = renderDetail(article);
  };

  // 不支持 API 时立即更新，不能让动画能力阻塞内容展示。
  if (!document.startViewTransition) {
    update();
    return;
  }

  // 回调在旧视图快照之后执行；Promise 失败会放弃本次过渡。
  document.startViewTransition(update);

这里不要把网络请求、模板拼接和多次互相覆盖的状态变更混在回调里。若详情数据尚未准备好，应先完成数据准备，再在一次回调中提交可见 DOM；这样旧视图、新视图和动画边界更容易对应。

用唯一命名让对应元素进入同一过渡组

默认的 root 过渡适合整页淡入淡出，但卡片封面、头像或标题需要“从原位置长到新位置”时，要给旧视图和新视图里的对应元素设置同一个名字。这个名字不是普通 class，也不能在同一棵参与过渡的视图里随意复用。

/* 让这张封面独立于 root 过渡，形成单独的命名组。 */
.article-cover {
  view-transition-name: article-cover;
}

/* 命名组只调这张封面的持续时间，root 仍使用默认动画。 */
::view-transition-group(article-cover) {
  animation-duration: 360ms;
}

/* 旧快照淡出，新视图保留清晰度，避免两层都抢视觉焦点。 */
::view-transition-old(article-cover) {
  animation: cover-out 180ms ease both;
}

::view-transition-new(article-cover) {
  animation: cover-in 360ms ease both;
}

列表和详情模板都应输出 class="article-cover"，并保证同一时刻只有一个元素使用这个名字。如果列表中有多张卡片，可在渲染时生成每张卡片自己的名称，例如 article-cover-42；不要让所有卡片共享 article-cover，否则浏览器无法判断一对一关系。

参数和边界要按一次过渡来设计

如果同一次点击既改变筛选条件又改变详情区域，尽量合并成一次 startViewTransition 调用。需要异步准备数据时，可以让更新回调返回 Promise；但错误处理要落到普通更新或明确的错误界面，不能让用户停留在旧内容上。

常见问题

为什么设置了 view-transition-name 却没有移动效果？

先确认元素确实在同一次 startViewTransition 前后都存在，再检查名称是否唯一、CSS 伪元素选择器是否写对，以及回调是否在过渡启动前完成了预期 DOM 更新。

不支持 View Transition API 时需要单独写两套页面吗？

不需要。把 DOM 更新抽成同一个函数，在没有 document.startViewTransition 时直接调用即可；动画只是增强，内容更新不能依赖它。

如何照顾不喜欢动态效果的用户？

保留无动画路径，并用 prefers-reduced-motion: reduce 缩短或关闭过渡。页面切换的重点是上下文连续，不能让动画压过阅读和操作。

资料入口：https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API