使用 View Transition API 实现平滑过渡

07/31/2024 05:10:00 | China Standard Time

Chromium 111 和 126 中正式支持了 SPA 与 MPA 的 View Transition API，您可以借助 View Transition API 在网站上的不同视图之间创建无缝的视觉转场。为用户浏览网站时打造更具视觉吸引力的用户体验。

借助 View Transition API，您可以在网站上的不同视图之间创建无缝的视觉转场。无论网站是多页应用 `MPA` 还是单页应用 `SPA`，这都能为用户浏览网站时打造更具视觉吸引力的用户体验。

您会在典型情况下使用视图过渡，包括：

- 缩略图图片，在商品详情页面上转换为完整尺寸的商品图片。
- 一个固定的导航栏，当您从一个页面导航到另一个页面时，导航栏始终保持不变。
- 一个网格，其中的项在您过滤时位置会移动。

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/062fb2d8-ce41-4988-afa9-b1590055be92.jpg" style="width: 100%;" muted controls loop="loop"></video>

> 演示：https://http203-playlist.netlify.app/

# 实现视图转换

视图转换与特定的应用架构或框架无关，并且不仅可以在单个文档上触发，还可以在两个不同文档之间触发。

这两种类型的视图过渡依赖于完全相同的构建块和原则：

- 浏览器会截取旧状态和新状态的快照。
- `DOM` 会在渲染被抑制时更新。
- 过渡由 `CSS` 动画提供支持。

MPA 和 SPA 的 View Transition API 的区别在于触发方式。

# 同文档视图转换

针对单个文档运行视图转换称为 `同文档视图转换`。单页应用 `SPA` 中通常就属于这种情况。`Chrome 111` 及更高版本支持同文档视图过渡。

浏览器支持
- Chrome 111
- Edge 111
- Firefox 暂不支持
- Safari 18

### 触发方式

通过调用 `document.startViewTransition` 触发同文档视图转换：

```javascript
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 自定义动画。

其中，`updateTheDOMSomehow` 用于将 DOM 更改为新状态。您可以根据需要进行此操作。例如，您可以添加或移除元素、更改类名称或更改样式。

这样，页面就会交错淡出：

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/999bd9a7-e9f5-4b34-aeb6-b7484ea3c710.jpg" style="width: 100%;" muted controls loop="loop"></video>

### 自定义转场效果

所有视图转换伪元素都可以使用 CSS 进行定位，并且由于动画是使用 CSS 定义的，因此您可以使用现有的 CSS 动画属性对其进行修改。例如，降低淡入淡出的速度：

```css
::view-transition-old(root),
::view-transition-new(root) {
		animation-duration: 5s;
}
```

也可以实现 Material Design 的共享轴转场：

```css
@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;
}
```

效果如下：

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/174d21d4-61f1-4623-b3d6-c7c622fa48f9.jpg" style="width: 100%;" muted controls autoplay="autoplay" loop="loop"></video>

### 对多个元素进行转换

在上一个演示中，整个页面都参与了共享轴转场。这适用于页面的大部分内容，但对于标题似乎不太合适，因为它滑出只是为了再次滑回。

为避免出现这种情况，您可以从网页的其余部分提取页眉，以便单独为其添加动画效果。具体方法是向元素分配 `view-transition-name`。

```css
.main-header {
		view-transition-name: main-header;
}
```

`view-transition-name` 的值可以是任意值（`none` 除外，这意味着没有过渡名称）。它用于在转换期间唯一地标识元素。

> 注意 ：view-transition-name 必须是唯一的。如果两个渲染的元素同时具有相同的 view-transition-name，系统会跳过转换。

效果如下，标题会保持在原位并进行交叉淡化：

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/11380460-89d7-44f5-829c-af437c0e568e.jpg" style="width: 100%;" muted controls loop="loop"></video>

> 提示： 当浏览器捕获多个过渡组时，不会创建多个视图过渡。相反，浏览器会创建一个涵盖所有过渡组的视图过渡。

好的，默认转场不仅仅是淡入淡出，`::view-transition-group` 也会进行转场：

- 定位和转换（使用`transform`）
- 宽度
- 高度

在此之前，这并不重要，因为 DOM 两端的标头大小和位置发生变化。不过，您也可以提取标题中的文本：

```css
.main-header-text {
		view-transition-name: main-header-text;
		width: fit-content;
}
```

使用了 `fit-content`，因此元素将根据文本的大小进行调整，而不是拉伸至剩余宽度。如果不执行此操作，返回箭头会减小标题文本元素的大小，而不是在两页中显示相同的大小。

现在，标题文本会以令人满意的滑动方式滑动，为返回按钮留出空间。

效果如下：

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/bd63e5ab-4b64-4395-8965-3c904c1ef8ba.jpg" style="width: 100%;" muted controls loop="loop"></video>

> 注意：视图转换使用扁平结构。在真实 DOM 中，标题文本位于标题中。但在过渡期间，它们各自的 ::view-transition-group 是同级的。在将项从一个容器动画化到另一个容器时，这非常有用，因为您无需担心父元素的剪裁。

### 使用 view-transition-class 以相同的方式为多个伪元素添加动画效果

假设您有一个视图过渡效果，其中包含许多卡片，但页面上还包含一个标题。如需为标题以外的所有卡片添加动画效果，您必须编写一个定位到每个单独卡片的选择器。

```css
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` 可用于视图转换伪元素，以应用相同的样式规则。

```css
#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);
}
```

> 提示：您必须为每个元素提供唯一的 `view-transition-name`，才能捕获数据。`view-transition-class` 会删除重复的动画样式。

### 转换元素不必是同一 DOM 元素

到目前为止，我们已使用 `view-transition-name` 为标题中的文本和标题中的文本创建单独的转场元素。从概念上讲，DOM 更改前后这些元素是相同的，但您也可以创建不符合这种情况的转换。

例如，可以为主视频嵌入提供 `view-transition-name`：

```css
.full-embed {
		view-transition-name: full-embed;
}
```

然后，在点击缩略图时，可以为其提供相同的 `view-transition-name`，但仅在转换期间有效：

```javascript
thumbnail.onclick = async () => {
		thumbnail.style.viewTransitionName = 'full-embed';

		document.startViewTransition(() => {
				thumbnail.style.viewTransitionName = '';
				updateTheDOMSomehow();
		});
};
```

效果如下：

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/d496fb86-7528-4487-a552-a0c2b04cb9b5.jpg" style="width: 100%;" muted controls loop="loop"></video>

缩略图现在会过渡到主图片中。尽管它们在概念上（以及字面上）是不同的元素，但转场 API 会将它们视为同一元素，因为它们共享相同的 `view-transition-name`。

此过渡的实际代码比上一个示例稍微复杂一点，因为它还处理返回到缩略图页面的过渡。如需了解完整的实现，请参阅[源代码](https://glitch.com/edit/#!/simple-set-demos)。

### 自定义进入和退出过渡

在此示例中边栏是过渡的一部分，但与上例中的标题不同，边栏不会显示在所有网页上。

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/081699ce-3355-462c-acd0-92c113e2180e.jpg" style="width: 100%;" muted controls loop="loop"></video>

如要创建特定的进入和退出过渡，当伪元素是图像对中的唯一子元素时，您可以使用 `:only-child` 伪类来定位旧伪元素：

```css
/* 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 更新，并等待重要内容准备就绪。

```javascript
document.startViewTransition(async () => {
		await something;
		await updateTheDOMSomehow();
		await somethingElse;
});
```

在 promise 执行之前，不会开始转换。在此期间，网页会冻结，因此应尽可能减少此处的延迟。具体而言，网络提取应在调用 `.startViewTransition()` 之前完成，此时页面仍可完全互动，而不是作为 `.startViewTransition()` 回调的一部分执行。

如果您决定等待图片或字体准备就绪，请务必使用较宽的超时设置：

```javascript
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)]);
});
```

但在某些情况下，最好完全避免延迟，并使用您已有的内容。

### 充分利用您已有的内容

如果缩略图转换为较大的图片：

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/054296d5-1013-415f-a1ec-a834213e9976.jpg" style="width: 100%;" muted controls loop="loop"></video>

> 演示站点 [https://http203-playlist.netlify.app/](https://http203-playlist.netlify.app/)

默认转场效果是淡入淡出，也就是说，缩略图可能会与尚未加载的完整图片交错淡出。

一种处理此问题的方法是等待整个图片加载完毕，然后再开始转场。理想情况下，应在调用 `.startViewTransition()` 之前执行此操作，以便页面保持可互动状态，并显示一个旋转图标以向用户表明内容正在加载。但在本例中，有更好的方法：

```css
::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，会怎么样？

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/27346623-9b31-4771-8837-b8903016bdf5.jpg" style="width: 100%;" muted controls loop="loop"></video>

> 演示站点 [https://simple-set-demos.glitch.me/7-expanding-image-ratio/](https://simple-set-demos.glitch.me/7-expanding-image-ratio/)

在默认的转换中，组会从之前的大小动画化为之后的大小。旧视图和新视图的宽度均为组的 100%，高度为自动高度，这意味着无论组的大小如何，它们都会保持宽高比。

这是一个很好的默认值，但在本例中并不符合预期。因此：

```css
::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

> 注意：在 Web 性能界中，通常不赞成对宽度和高度进行动画处理（如 `::view-transition-group` 中所示），因为这会导致每帧运行一次布局。不过，对于 View 转换，Chrome 团队计划对其进行优化，以便在大多数情况下在主线程上运行。此优化功能尚未实现。

### 使用媒体查询更改不同设备状态的转换

您可能希望在移动设备和桌面设备上使用不同的转场效果，例如下例中，在移动设备上执行从侧边完全滑动，但在桌面设备上执行更细微的滑动，这可以通过常规媒体查询来实现。

```css
/* 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 中公开。

您可以选择阻止这些用户转换：

```css
@media (prefers-reduced-motion) {
		::view-transition-group(*),
		::view-transition-old(*),
		::view-transition-new(*) {
				animation: none !important;
		}
}
```

不过，用户选择“减少动画”并不意味着用户希望不显示任何动画。除了上述代码段，您也可以选择更精细的动画，但该动画仍然可以表达元素与数据流之间的关系。

### 使用视图转换类型处理多个视图转换样式

有时，从某个特定视图到另一个视图的过渡应有专门定制的过渡。例如，在分页序列中前往下一页或上一页时，您可能希望将内容滑动到不同的方向，具体取决于您是前往序列中的上一个页面还是下一个页面。

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/eb6188c5-7bc2-48a6-a50f-01ec96a5c281.jpg" style="width: 100%;" muted controls loop="loop"></video>

> 演示站点 [https://view-transitions.netlify.app/pagination/spa-types/](https://view-transitions.netlify.app/pagination/spa-types/)

为此，您可以使用视图转换类型，以便为有效的视图转换分配一种或多种类型。例如，在分页序列中转换到更高页面时，请使用 `forwards` 类型；在转换到更低页面时，请使用 `backwards` 类型。这些类型仅在捕获或执行转场时处于活动状态，并且每种类型都可以通过 `CSS` 进行自定义，以使用不同的动画。

如需在同文档视图过渡中使用类型，请将 `types` 传入 `startViewTransition` 方法。为此，`document.startViewTransition` 还接受一个对象：`update` 是更新 `DOM` 的回调函数，`types` 是包含类型的数组。

```js
const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
		update: updateTheDOMSomehow,
		types: ['slide', direction],
});
```

> 注意：包含类型的数组会自动转换为 `Set` 类似的对象。如需在转换实际运行之前转变其内容，请使用其实例方法 `clear()`、`add()` 和 `delete()`

如需响应这些类型，请使用 `:active-view-transition-type()` 选择器。将要定位到的 type 传递给选择器。这样，您就可以将多个视图过渡的样式彼此分隔开，而不会干扰另一个的声明。

由于类型仅在捕获或执行过渡时适用，因此您可以使用选择器针对具有该类型的视图过渡，在元素上设置（或取消设置）`view-transition-name`。

```css
/* 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;
		}
}
```

### 运行转场而不冻结其他动画

请观看以下视频转换位置演示：

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/fcc33842-17bd-43fc-b227-fe39bd0d2ea3.jpg" style="width: 100%; max-width: 500px;" muted controls loop="loop"></video>

在过渡期间，视频看起来像是卡住了，然后播放的视频会淡入。这是因为 `::view-transition-old(video)` 是旧视图的屏幕截图，而 `::view-transition-new(video)` 是新视图的实时图片。

您可以修正此问题，但首先要问问自己它是否值得修正。如果没有看到“问题”当过渡以正常速度播放时，我无需更改它。

如果您真的想解决此问题，请勿显示 `::view-transition-old(video)` 直接切换到 `::view-transition-new(video)`。为此，您可以替换默认样式和动画：

```css
::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;
}
```

现在，视频会在整个过渡期间播放。

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/23d734bf-008e-4871-a246-9a845fd267d5.jpg" style="width: 100%; max-width: 500px;" muted controls loop="loop"></video>

### 使用 JavaScript 创建动画

到目前为止，所有转场均使用 CSS 定义，但有时 CSS 还不够：

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/4a2fcbfc-8bb6-405d-aaa9-dfd05709915a.jpg" style="width: 100%;" muted controls loop="loop"></video>

此过渡的某些部分无法仅使用 CSS 实现：

- 动画从点击位置开始播放。
- 动画结束时，圆周以半径为距离最远的角落。不过，希望未来 CSS 能够实现这一点。

幸运的是，您可以使用 Web 动画 API 创建转场效果！

```js
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);
  });

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 文档](https://developer.chrome.com/docs/web-platform/view-transitions/same-document?hl=zh-cn#api-reference) 中介绍了此对象的其他属性。

### 示例

以下 `卡片示例` 是一个 `SPA`，它使用同文档视图过渡，在添加新卡片或移除卡片时为卡片添加动画效果。

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/ce36710e-497e-4519-abbb-4a86255bd4b9.jpg" style="width: 100%;" muted controls loop="loop"></video>

> 演示：https://view-transitions.netlify.app/cards/spa/

# 跨文档视图转换

两个不同文档之间的视图转换称为 `跨文档视图转换`。这对于 `MPA` 来说是典型的。`Chrome 126` 及更高版本支持跨文档视图转换。

浏览器支持
- Chrome 126
- Edge 126
- Firefox 暂不支持
- Safari 暂不支持

### 触发方式

跨文档视图转换由同源跨文档导航触发（如果两个页面都已启用）。换句话说，没有可调用的 API 来启动跨文档视图转换。当用户点击某个链接时，此点击会触发视图过渡。

选择启用，请使用以下 CSS 代码段：

```css
@view-transition {
		navigation: auto;
}
```

### 示例

以下 `Stack Navigator` 示例是一个在两个不同文档之间使用跨文档视图转换的 `MPA`。页面会推送到堆栈或弹出，具体取决于您是否深入导航。

<video src="https://corehome.oss-accelerate.aliyuncs.com/blogs/44cfb106-e64a-4186-a23f-ffae85911c92.jpg" style="width: 100%;" muted controls loop="loop"></video>

> 演示：https://view-transitions.netlify.app/stack-navigator/mpa-prerender/

anonymous 2024/07/31 09:07