适用于单页应用的同文档视图转换

Jake Archibald

Bramus

当针对单个文档运行视图转换时，这种转换称为同一文档视图转换。使用 JavaScript 更新 DOM 的单页应用 (SPA) 中通常就属于这种情况。从 Chrome 111 开始，Chrome 支持同一份文档的视图转换。

如需触发同文档视图转换，请调用 document.startViewTransition：

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

在被调用后，浏览器将自动截取声明了 view-transition-name CSS 属性的所有元素的快照。

然后执行传入的回调以更新 DOM，然后截取新状态的快照。

然后，这些快照被排列成伪元素树，并利用 CSS 动画的强大功能添加动画效果。来自新旧状态的成对快照从其旧位置和大小平滑地转换到新位置，同时其内容淡入淡出。如果需要，您可以使用 CSS 自定义动画。

默认过渡：交叉淡入淡出

默认视图转换是淡入淡出，因此它是对 API 的实用介绍：

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

其中 updateTheDOMSomehow 用于将 DOM 更改为新状态。您可以随意地执行此操作。例如，您可以添加或移除元素、更改类名称或更改样式。

就像这样，页面淡入淡出：

淡入淡出效果没那么好幸运的是，你可以自定义转场效果，但首先，你需要了解这种基本的淡入淡出效果。

这些过渡期的运作方式

我们来更新之前的代码示例。

document.startViewTransition(() => updateTheDOMSomehow(data));

当调用 .startViewTransition() 时，该 API 会捕获页面的当前状态。其中包括拍摄快照。

完成后，系统会调用传递给 .startViewTransition() 的回调。这就是 DOM 发生变化的地方。然后，该 API 会捕获网页的新状态。

捕获新状态后，该 API 会构造一个伪元素树，如下所示：

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

::view-transition 位于叠加层中，位于页面上所有其他内容之上。如果您想设置过渡的背景颜色，便可使用此属性。

::view-transition-old(root) 是旧视图的屏幕截图，::view-transition-new(root) 是新视图的实时表示。两者均呈现为 CSS“替换内容”（例如 <img>）。

旧视图的动画效果从 opacity: 1 到 opacity: 0，而新视图则从 opacity: 0 过渡到 opacity: 1，从而形成淡入淡出。

所有的动画都是使用 CSS 动画执行的，因此可以使用 CSS 进行自定义。

自定义转场效果

所有视图过渡伪元素都可以使用 CSS 来定位，并且由于动画是使用 CSS 定义的，因此您可以使用现有的 CSS 动画属性对其进行修改。例如：

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

完成这项更改后，淡出现在变得很慢：

好吧，没那么厉害。不过，以下代码会实现 Material Design 的共享轴转场：

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

结果如下：

转换多个元素

在上一个演示中，整个页面都涉及了共享轴过渡。这适用于页面的大部分内容，但似乎不太适合标题，因为标题就会滑出，只是为了重新滑回。

为避免出现这种情况，您可以从页面的其余部分提取页眉，以便单独为其添加动画效果。可通过为元素分配 view-transition-name 来实现。

.main-header {
  view-transition-name: main-header;
}

view-transition-name 的值可以是您所需的任何值（none 除外，这意味着没有转换名称）。它用于唯一标识整个过渡过程中的元素。

结果：

现在，标题会留在原处并淡入淡出。

该 CSS 声明导致伪元素树发生变化：

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(main-header)
   └─ ::view-transition-image-pair(main-header)
      ├─ ::view-transition-old(main-header)
      └─ ::view-transition-new(main-header)

现在有两个转换组。一个用于标题，另一个用于其余部分。这些元素可以通过 CSS 单独定位，并且采用不同的过渡。不过，在本例中，main-header 保留了默认过渡，即淡入淡出。

好的，默认过渡不只是交替淡出，::view-transition-group 还会过渡：

• 定位和转换（使用 transform）
• 宽度
• 身高

到目前为止，这无关紧要，因为 DOM 更改的两侧标题大小和位置都相同。但您也可以提取标题中的文本：

.main-header-text {
  view-transition-name: main-header-text;
  width: fit-content;
}

使用 fit-content，使元素按照文本的大小调整，而不是拉伸至剩余宽度。否则，返回箭头会缩小标题文本元素的大小，而不是两个页面中的相同大小。

现在，我们要处理以下三个部分：

::view-transition
├─ ::view-transition-group(root)
│  └─ …
├─ ::view-transition-group(main-header)
│  └─ …
└─ ::view-transition-group(main-header-text)
   └─ …

同样，只需使用默认值即可：

现在，标题文本有一点令人满意的滑行，为返回按钮留出空间。

使用 view-transition-class 以相同的方式为多个伪元素添加动画效果

假设您的视图过渡包含许多卡片，但页面上还设置了标题。若要为除标题以外的所有卡片添加动画效果，您必须编写一个选择器，用于定位每张卡片。

h1 {
    view-transition-name: title;
}
::view-transition-group(title) {
    animation-timing-function: ease-in-out;
}

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
…
#card20 { view-transition-name: card20; }

::view-transition-group(card1),
::view-transition-group(card2),
::view-transition-group(card3),
::view-transition-group(card4),
…
::view-transition-group(card20) {
    animation-timing-function: var(--bounce);
}

有 20 个元素？您需要编写 20 个选择器。添加新元素？然后，您还需要扩大应用动画样式的选择器。可扩展性不强。

view-transition-class 可在视图转换伪元素中使用，以应用相同的样式规则。

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
#card5 { view-transition-name: card5; }
…
#card20 { view-transition-name: card20; }

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

以下卡片示例使用了之前的 CSS 代码段。所有卡片（包括新添加的卡片）都可通过以下 1 个选择器应用相同的时间设置：html::view-transition-group(.card)。

调试转换

由于视图过渡是在 CSS 动画的基础上构建的，因此 Chrome 开发者工具中的 Animations 面板非常适用于调试过渡效果。

使用动画面板，您可以暂停下一个动画，然后在该动画中前后拖动。在此期间，可以在元素面板中找到过渡伪元素。

过渡元素不必是同一个 DOM 元素

到目前为止，我们已使用 view-transition-name 为标题以及标题中的文本创建了单独的过渡元素。从概念上来讲，这些元素在 DOM 更改之前和之后是相同的，但您可以在其中创建过渡效果。

例如，可以向主视频嵌入提供 view-transition-name：

.full-embed {
  view-transition-name: full-embed;
}

然后，在用户点击缩略图时，可以为其赋予相同的 view-transition-name，只是在过渡期间会保持不变：

thumbnail.onclick = async () => {
  thumbnail.style.viewTransitionName = 'full-embed';

  document.startViewTransition(() => {
    thumbnail.style.viewTransitionName = '';
    updateTheDOMSomehow();
  });
};

结果：

现在，缩略图将过渡到主图片。虽然它们在概念上（和字面上）是不同的元素，但 Transition API 将它们视为相同的元素，因为它们共享相同的 view-transition-name。

此过渡的实际代码比上一个示例稍微复杂一些，因为它还处理了返回到缩略图页面的过渡。如需了解完整实现，请查看源代码。

自定义进入和退出过渡

看看下面这个示例：

边栏是转换的一部分：

.sidebar {
  view-transition-name: sidebar;
}

但与前面示例中的标题不同，边栏并非所有页面都显示。如果两种状态都有边栏，过渡伪元素将如下所示：

::view-transition
├─ …other transition groups…
└─ ::view-transition-group(sidebar)
   └─ ::view-transition-image-pair(sidebar)
      ├─ ::view-transition-old(sidebar)
      └─ ::view-transition-new(sidebar)

不过，如果边栏仅位于新页面上，则 ::view-transition-old(sidebar) 伪元素不会存在。由于边栏没有“旧”图片，因此图片对只有 ::view-transition-new(sidebar)。同样，如果边栏仅位于旧页面上，则图片对将只有一个 ::view-transition-old(sidebar)。

在前面的演示中，根据边栏是处于进入、退出还是同时显示这两种状态，边栏的转换效果会有所不同。它通过从右侧滑入并淡入进入，而通过向右滑动并淡出退出；在两种状态同时显示时，它都会留在原处。

如需创建特定的进入和退出过渡，您可以使用 :only-child 伪类，在旧伪元素或新伪元素是图片对中的唯一子元素时定位到它：

/* Entry transition */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Exit transition */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

在这种情况下，边栏在两种状态下都没有特定的转换，因为默认设置是完美的。

异步 DOM 更新和等待内容

传递给 .startViewTransition() 的回调可以返回一个 promise，以允许异步 DOM 更新并等待重要内容准备就绪。

document.startViewTransition(async () => {
  await something;
  await updateTheDOMSomehow();
  await somethingElse;
});

在 promise 执行之前，转换不会开始。在此期间，页面会冻结，因此应尽可能缩短延迟时间。具体来说，网络提取应在调用 .startViewTransition() 之前完成，同时网页仍具有完全可交互性，而不是作为 .startViewTransition() 回调的一部分执行。

如果您决定等待图片或字体准备就绪，请务必使用激进型超时：

const wait = ms => new Promise(r => setTimeout(r, ms));

document.startViewTransition(async () => {
  updateTheDOMSomehow();

  // Pause for up to 100ms for fonts to be ready:
  await Promise.race([document.fonts.ready, wait(100)]);
});

但在某些情况下，最好完全避免延迟，并使用您已有的内容。

充分利用现有的内容

如果缩略图过渡到较大的图片：

默认过渡为淡入淡出，这意味着缩略图可以与尚未加载的完整图片进行淡入淡出。

处理此问题的一种方法是在开始转换之前等待整个图片加载完毕。理想情况下，此操作应在调用 .startViewTransition() 之前完成，以便页面保持互动状态，并且可显示一个旋转图标以向用户表明内容正在加载。但在这种情况下，有一种更好的方法：

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
}

现在，缩略图不会消失，只是位于完整图片下方。这意味着，如果新视图尚未加载，则缩略图会在整个过渡过程中一直显示。这意味着转换可以直接开始，并且整个图片可以在自己的时间内完成加载。

如果新视图具有透明度，则不起作用，但在本例中，我们知道没有透明度，因此我们可以进行此优化。

处理宽高比的变化

方便的是，目前为止所有转换都指向具有相同宽高比的元素，但情况并非总是如此。如果缩略图为 1:1，而主图片为 16:9，该怎么办？

在默认过渡中，该组的动画效果会从之前的尺寸过渡到之后的尺寸。新旧视图均采用组为 100% 的宽度并会自动采用高度，这意味着无论组大小如何，它们都会保持宽高比不变。

这是一个不错的默认值，但在本例中并不是我们想要的。因此：

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
  /* Make the height the same as the group,
  meaning the view size might not match its aspect-ratio. */
  height: 100%;
  /* Clip any overflow of the view */
  overflow: clip;
}

/* The old view is the thumbnail */
::view-transition-old(full-embed) {
  /* Maintain the aspect ratio of the view,
  by shrinking it to fit within the bounds of the element */
  object-fit: contain;
}

/* The new view is the full image */
::view-transition-new(full-embed) {
  /* Maintain the aspect ratio of the view,
  by growing it to cover the bounds of the element */
  object-fit: cover;
}

这意味着，当宽度增加时，缩略图始终位于元素的中心，但当从 1:1 过渡到 16:9 时，整个图片会“未剪裁”。

如需了解详情，请参阅（视图过渡：处理宽高比变化）(https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/)

使用媒体查询针对不同设备状态更改过渡效果

您可能需要在移动设备与桌面设备上使用不同的转场效果，如下例所示，在移动设备上，从侧边完整滑动，而在桌面设备上则进行更为细微的滑动：

这可以通过常规媒体查询来实现：

/* Transitions for mobile */
::view-transition-old(root) {
  animation: 300ms ease-out both full-slide-to-left;
}

::view-transition-new(root) {
  animation: 300ms ease-out both full-slide-from-right;
}

@media (min-width: 500px) {
  /* Overrides for larger displays.
  This is the shared axis transition from earlier in the article. */
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

您可能还需要根据匹配的媒体查询更改为其分配 view-transition-name 的元素。

针对“减少动作”偏好设置做出响应

用户可以通过其操作系统指明他们更喜欢减少动作，这一偏好设置会在 CSS 中公开。

您可以选择阻止这些用户进行转换：

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

不过，偏好“减少动作”并不意味着用户不需要“没有动作”。您可以选择一个更细微的动画，但可以表达元素和数据流之间的关系，而不是使用前面的代码段。

使用视图转换类型处理多种视图转换样式

有时，从一个特定视图转换到另一个视图时，应该进行专门定制的转换。例如，在分页序列中前往下一页或上一页时，您可能希望向不同的方向滑动内容，具体取决于您是从序列中前往较高页面还是较低页面。

为此，您可以使用视图过渡类型，以便向 Active View 过渡分配一种或多种类型。例如，转到分页序列中的较高位置时，使用 forwards 类型；转到较低位置时，使用 backwards 类型。这些类型仅在捕获或执行过渡时有效，并且每种类型都可以通过 CSS 自定义，以使用不同的动画。

若要在同一文档视图转换中使用类型，请将 types 传入 startViewTransition 方法。为此，document.startViewTransition 还接受对象：update 是更新 DOM 的回调函数，types 是包含类型的数组。

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
});

若要响应这些类型，请使用 :active-view-transition-type() 选择器。将您要定位的 type 传入选择器中。这样一来，您就可以使多个视图转换的样式彼此分离，而不会使一个视图转换的声明干扰另一个视图转换的声明。

由于类型仅在捕获或执行过渡时适用，因此您可以使用选择器仅针对相应类型的视图过渡在元素上设置或取消设置 view-transition-name。

/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }
  article {
    view-transition-name: content;
  }
  .pagination {
    view-transition-name: pagination;
  }
}

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only (using the default root snapshot) */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }
  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}

在下面的分页演示中，网页内容会根据您要转到的页码向前或向后滑动。类型在点击时确定，被传递到 document.startViewTransition 中。

如需定位任何 Active View 过渡（无论其类型如何），您可以改用 :active-view-transition 伪类选择器。

html:active-view-transition {
    …
}

在视图转换根上处理具有类名称的多个视图转换样式

有时，在从一种特定类型的视图转换到另一种视图时，应该进行专门定制的转换。或者，“返回”导航应该不同于“前进”导航。

在过渡类型推出之前，处理这些情况的方式是在过渡根上临时设置类名称。调用 document.startViewTransition 时，此过渡根是 <html> 元素，可在 JavaScript 中使用 document.documentElement 进行访问：

if (isBackNavigation) {
  document.documentElement.classList.add('back-transition');
}

const transition = document.startViewTransition(() =>
  updateTheDOMSomehow(data)
);

try {
  await transition.finished;
} finally {
  document.documentElement.classList.remove('back-transition');
}

为了在转换完成后移除类，此示例使用了 transition.finished，这是一个在转换达到结束状态后解析的 promise。API 参考文档介绍了此对象的其他属性。

现在，您可以在 CSS 中使用该类名称来更改过渡：

/* 'Forward' transitions */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms
      cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Overrides for 'back' transitions */
.back-transition::view-transition-old(root) {
  animation-name: fade-out, slide-to-right;
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, slide-from-left;
}

与媒体查询一样，这些类的存在也可用于更改获取 view-transition-name 的元素。

运行过渡而不冻结其他动画

请看下面的视频转换位置演示：

您发现它有什么问题吗？如果您没有这样做，也不用担心。在这里，它的播放速度会变慢：

在过渡过程中，视频看起来会冻结，然后视频的播放版本会淡入。这是因为 ::view-transition-old(video) 是旧视图的屏幕截图，而 ::view-transition-new(video) 是新视图的实时图片。

您可以解决这个问题，但首先要问问自己是否值得修正。如果您在以正常速度播放过渡时没有发现“问题”，我就不愿更改它。

如果您确实想要解决此问题，请不要显示 ::view-transition-old(video)，直接切换到 ::view-transition-new(video)。您可以通过替换默认样式和动画来实现此目的：

::view-transition-old(video) {
  /* Don't show the frozen old view */
  display: none;
}

::view-transition-new(video) {
  /* Don't fade the new view in */
  animation: none;
}

这样就大功告成了！

现在，视频会在整个过渡过程中播放。

使用 JavaScript 添加动画效果

到目前为止，所有转换都是使用 CSS 定义的，但有时 CSS 是不够的：

此过渡的以下几个部分是单靠 CSS 无法实现的：

• 动画会从点击位置开始。
• 动画的结束位置是一个圆形，并有距离最远角的半径。不过，有希望将来 CSS 能够实现这一点。

幸运的是，您可以使用 Web Animation API 创建转场效果！

let lastClick;
addEventListener('click', event => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );

  // With a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        // Specify which pseudo-element to animate
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}

此示例使用了 transition.ready，该 promise 会在成功创建过渡伪元素后进行解析。API 参考文档介绍了此对象的其他属性。

使用过渡效果作为增强功能

View Transition API 旨在“封装”DOM 更改并为其创建过渡。不过，应将过渡视为增强功能，因为，如果 DOM 更改成功但过渡失败，您的应用不应进入“错误”状态。理想情况下，过渡不应该失败，但如果失败，它不应该破坏其余的用户体验。

为了将转换视为增强功能，在使用 Transition Promise 时，避免在转换失败时导致应用抛出。

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  await transition.ready;

  document.documentElement.animate(
    {
      clipPath: [`inset(50%)`, `inset(0)`],
    },
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(root)',
    }
  );
}

该示例的问题在于，如果过渡无法达到 ready 状态，switchView() 将拒绝，但这并不意味着视图无法切换。DOM 可能已成功更新，但存在重复的 view-transition-name，因此跳过了转换。

请改为执行以下操作：

async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  animateFromMiddle(transition);

  await transition.updateCallbackDone;
}

async function animateFromMiddle(transition) {
  try {
    await transition.ready;

    document.documentElement.animate(
      {
        clipPath: [`inset(50%)`, `inset(0)`],
      },
      {
        duration: 500,
        easing: 'ease-in',
        pseudoElement: '::view-transition-new(root)',
      }
    );
  } catch (err) {
    // You might want to log this error, but it shouldn't break the app
  }
}

此示例使用 transition.updateCallbackDone 等待 DOM 更新，并在更新失败时拒绝更新。如果过渡失败，switchView 不再拒绝；它会在 DOM 更新完成时进行解析，并在过渡失败时拒绝。

如果您希望 switchView 在新视图“稳定”后解析（例如，任何动画转场已完成或跳至结尾），请将 transition.updateCallbackDone 替换为 transition.finished。

不是 polyfill，不过...

这项 polyfill 功能并非易事。不过，在不支持视图转换的浏览器中，此辅助函数会大大简化操作：

function transitionHelper({
  skipTransition = false,
  types = [],
  update,
}) {

  const unsupported = (error) => {
    const updateCallbackDone = Promise.resolve(update()).then(() => {});

    return {
      ready: Promise.reject(Error(error)),
      updateCallbackDone,
      finished: updateCallbackDone,
      skipTransition: () => {},
      types,
    };
  }

  if (skipTransition || !document.startViewTransition) {
    return unsupported('View Transitions are not supported in this browser');
  }

  try {
    const transition = document.startViewTransition({
      update,
      types,
    });

    return transition;
  } catch (e) {
    return unsupported('View Transitions with types are not supported in this browser');
  }
}

其使用方式如下：

function spaNavigate(data) {
  const types = isBackNavigation ? ['back-transition'] : [];

  const transition = transitionHelper({
    update() {
      updateTheDOMSomehow(data);
    },
    types,
  });

  // …
}

在不支持视图过渡的浏览器中，系统仍会调用 updateDOM，但不会添加动画过渡效果。

您还可以提供一些 classNames，以便在转场期间添加到 <html>，从而更轻松地根据导航类型更改转场效果。

如果您不想使用动画，也可以将 true 传递给 skipTransition，即使在支持视图转换的浏览器中也是如此。如果网站的用户偏好设置是停用过渡，此功能会非常有用。

使用框架

如果您使用的是将 DOM 更改抽象化的库或框架，比较棘手的部分是了解 DOM 更改何时完成。以下是一组在不同框架中使用上面的帮助程序的示例。

• React - 这里的键是 flushSync，它会同步应用一组状态更改。是的，使用该 API 会收到一条重要警告，但 Dan Abramov 向我保证，该 API 适用于这种情况。与往常的 React 和异步代码一样，在使用 startViewTransition 返回的各种 promise 时，请注意您的代码是否以正确的状态运行。
• Vue.js - 这里的键是 nextTick，它会在 DOM 更新后执行。
• Svelte - 与 Vue 非常相似，但等待下一次更改的方法是 tick。
• Lit - 这里的键是组件中的 this.updateComplete promise，在 DOM 更新后执行。
• Angular - 这里的关键是 applicationRef.tick，它会清空待处理的 DOM 更改。从 Angular 17 版开始，您可以使用 @angular/router 附带的 withViewTransitions。

API 参考文档

const viewTransition = document.startViewTransition(update)

启动一个新的 ViewTransition。

update 是一个在捕获文档的当前状态时调用的函数。

然后，当 updateCallback 返回的 promise 执行时，转换将从下一帧开始。如果 updateCallback 返回的 promise 拒绝，则会放弃转换。

const viewTransition = document.startViewTransition({ update, types })

启动具有指定类型的新 ViewTransition

捕获文档的当前状态后，系统会调用 update。

types 用于设置在捕获或执行转换时转换的有效类型。最初是空的。如需了解详情，请参阅下方的 viewTransition.types。

ViewTransition 的实例成员：

viewTransition.updateCallbackDone

在 updateCallback 返回的 promise 执行时执行或在拒绝时拒绝的 promise。

View Transition API 用于封装 DOM 更改并创建转场。但是，有时您并不关心过渡动画是否成功，您只想知道 DOM 是否发生更改以及何时发生。updateCallbackDone 适用于该用例。

viewTransition.ready

一个 promise，在过渡的伪元素创建完毕后，并且动画即将开始播放后执行。

如果转换无法开始，则会拒绝。这可能是因为配置错误，例如重复的 view-transition-name，或者 updateCallback 返回被拒绝的 promise。

这对于使用 JavaScript 为过渡伪元素添加动画效果非常有用。

viewTransition.finished

一个 promise，在最终状态对用户完全可见且可互动时执行的。

仅当 updateCallback 返回被拒绝的 promise 时，才会拒绝，因为这表示未创建最终状态。

否则，如果转换无法开始，或在转换过程中被跳过，则仍会达到结束状态，因此 finished 会执行。

viewTransition.types

类似于 Set 的对象，用于保存 Active View 过渡的类型。如需操纵这些条目，请使用其实例方法 clear()、add() 和 delete()。

如需响应 CSS 中的特定类型，请在过渡根上使用 :active-view-transition-type(type) 伪类选择器。

视图转换完成后，类型会自动清除。

viewTransition.skipTransition()

跳过过渡的动画部分。

这不会跳过对 updateCallback 的调用，因为 DOM 更改与转换是分开的。

默认样式和转换参考

::view-transition

根伪元素，用于填充视口并包含每个 ::view-transition-group。

::view-transition-group

已确定无误位置。

在“之前”和“之后”状态之间转换 width 和 height。

在“之前”和“之后”视口空间四边形之间转换 transform。

::view-transition-image-pair

完全可以填满整个群组。

具有 isolation: isolate，用于限制 mix-blend-mode 对旧视图和新视图的影响。

::view-transition-new和::view-transition-old

该位置绝对位于封装容器的左上角。

填满整个组宽度，但具有自动高度，因此它会保持宽高比，而不是填充组。

具有 mix-blend-mode: plus-lighter 以允许实现真正的淡入淡出。

旧视图从 opacity: 1 过渡到 opacity: 0。新的视图从 opacity: 0 过渡到 opacity: 1。

反馈

我们衷心期待开发者提供反馈。为此，请在 GitHub 上向 CSS 工作组提交问题，并附上相关建议和问题。为您的问题添加 [css-view-transitions] 前缀。

如果您遇到 bug，请改为提交 Chromium bug。