原文链接：View Transitions API & meta frameworks: a practical guide，2023.08.31，by Mojtaba Seyedi
掘金首发，7 天内禁止任何形式的转载。也欢迎大家关注我的微信公众号 “写代码的宝哥” ，每周至少 2 更，带你了解第一手前端资讯及常用技术学习 ;)。
View Transitions API 让你的多页应用（MPA）也能获得像单页应用（SPA）那样的丝滑导航体验。另外，这个 API 消除了 SPA 中所需要的一些复杂技术，简化了接入体验。
在移动的应用程序中平滑的导航时动画已经存在了一段时间。然而，在 Web 上实现同样的效果一直是一个挑战，直到现在，通常还需要复杂和独特的方法。而 View Transitions API，则是一个简单直接的基于浏览器的解决方案。
在本文中，我将解释这个 API 是什么以及它是如何工作的。我们将学习在状态和页面之间创建平滑和简单的过渡。我们还将探讨 View Transitions API 如何与 Astro 和 Nuxt 等 Meta 框架配合使用的。
准备好享受一段有趣而刺激的旅程吧。
什么是 View Transitions API？
View Transitions API 允许你在可视 DOM 改变的两种状态之间添加动画过渡。这些改变的范围可以从向 DOM 添加新元素这样的小更改，到从一个页面导航到另一个页面这样的的大更改。
为了方便说明，请考虑以下场景：
添加具有页面过渡效果的元素
在下面的视频中，单击按钮会将 <img> 元素添加到页面。其中一个按钮使用 View Transitions API，而另一个按钮没有使用。
使用页面过渡导航页面
对于页面导航等较大的更改，View Transitions API 真正发挥了作用。以下视频显示了使用和不使用 View Transitions API 时触发导航的效果对比。为了突出效果，我放慢了过渡的速度。
View Transitions API 在 Chrome 111 和更新版本中可用，因此你只需使用几行代码即可作为渐进式增强，轻松地将其添加到你的网站，而无需担心浏览器兼容性。
这个 API 最初是为单页应用程序（SPA）设计的，但现在它也适用于多页应用程序（MPA）。
一些例子
让我们深入研究一些示例，这些示例会让你对 View Transitions API 有更多了解，感受其强大的能力，并帮助你理解它的重要性和可能性。要试用这些 demo，请确保你使用的是最新的 Chrome 浏览器版本，并启用了 viewTransition API for navigations 标志。
在浏览器的地址栏中键入 chrome://flags，找到 viewTransition API for navigations 并将其更改为“已启用（Enabled）”。
让我们从两个示例开始，说明 View Transition API 背后的初衷。引入这个 API 最开始是为单页面应用程序引入不同状态之间的平滑过渡。
这两个 demo 由 Maxi Ferreira 制作，你可以在 GitHub 上访问它们的源代码。你可以在这里找到第一个 demo 源代码的链接，直接查看效果。
下面是第二个 demo：
之前的 demo 都是使用 Astro 构建的，这是为了方便。其实也可以不建立在任何 Web 框架上，也能实现类似的结果。来看一下下面的 demo：
你可以在这里尝试 demo。
惊不惊喜？你刚才看到的 demo 根本没有使用任何 JavaScript，只是一个使用 HTML 和 CSS 构建的简单多页网站。
现在，下面是同一个 demo，不过我们多添加了几行 JavaScript 来增强过渡并使它看起来更加精致：
你也可以在这里找到这个 demo。
如你所见，视图转换在路由级场景中工作得很好。但我想说明的是，你还可以在更细粒度上利用这个 API，甚至可以达到原子级（atomic scale），以创建更加绚丽多样的交互。
比如，我们可以看看 Adam Argyle 编写的这个 demo。他正在使用这个 API 向拖放组件添加过渡。你可以在 CodePen 上看到它的代码。
下面是 Adam 写的另一个很好的例子——一个数字计数器。
好例子还有很多（1，2），但现在一下子给你这么多，你肯定接受不了。所以，首先让我们先学一下这个 API 的工作原理以及如何使用。开始吧！
创建你的第一个 View Transitions API 应用
在我们讨论视图转换是如何工作的之前，我们先写一些简单的 demo——引入并使用 View Transitions API 其实很简单。
假设网页上有一个按钮，当我们点击时，希望插入一个图片到网页上。一般情况下，添加的图片会在没有任何花哨效果的情况下直接出现。现在，让我们看看如何使用 View Transitions API 使添加图片有平滑过渡。
下面是 HTML：
<button>Add image</button>
在 JavaScript 中，让我们在单击此按钮后向页面添加一个 <img> 元素：
const button = document.querySelector('button');
button.addEventListener("click", addImage);
function addImage() {
const newImage = document.createElement("img");
newImage.src = "https://source.unsplash.com/random";
document.body.appendChild(newImage);
}
现在，我们只需要在想要将元素追加到页面时调用 document.startViewTransition() 方法，如下所示：
function addImage() {
const newImage = document.createElement("img");
newImage.src = "https://source.unsplash.com/random";
document.startViewTransition(() => { // This kicks off the view transition
document.body.appendChild(newImage);
});
}
尝试品玩下面的 demo，就会发现，当你点击按钮时，你会看到一个平滑的淡入过渡效果。
使用 View Transitions API 非常简单。但是，在创建更多示例之前，让我们花一点时间来了解其背后的工作原理。
背后的运作机制
View Transitions API 听起来可能有点神秘，但是一旦你了解了它的工作原理并自己创建了一些 demo，就能很好地掌握它了。现在，就让我们来看看 API 使用的背后发生了什么。
当你触发视图转换时，例如：当你调用 document.startViewTransition() 时，浏览器会获取当前页面状态的快照。把这想象成一张屏幕上的快速照片（quick photo）。
魔术开始了。你在 document.startViewTransition() 中提供的回调函数会被调用。这是你更改网页上内容的地方。浏览器会巧妙地在回调过程中暂停渲染以防止任何页面闪烁（速度很快）。
回调完成后，浏览器将“拍摄”另一个快照，但这一次是新的页面状态，即你刚刚更改的页面状态。浏览器使用这两个快照来创建一个特殊的结构，类似存在于页面顶部的一个覆盖层。这个结构包括旧快照和新快照，它们堆叠在一起。
这个结构有不同的层，就像一个伪元素树。每一个都有它的目的，但我们现在不会细说。重要的是，这个覆盖层会覆盖页面上的所有内容。
::view-transition
└─ ::view-transition-group(root)
└─ ::view-transition-image-pair(root)
├─ ::view-transition-old(root)
└─ ::view-transition-new(root)
旧快照（::view-transition-old）和新快照（::view-transition-new）的就开始做过渡切换了。旧快照淡出（例如：不透明度从 1 降低到 0），新快照淡入（将不透明度从 0 增加到 1）。这会产生熟悉的交叉渐变效果。
渐变动画完成后，覆盖层被移除，并显示最终的页面状态。这是一种很聪明的做法，新旧内容不会同时存在，这避免了可访问性、可用性和布局上的问题。
下面有一个展示视觉层次效果，悬停于上，可以让你更容易地理解覆盖层的概念（由 Bramus 在 Codepen 上创建）：
这部分视觉动画是由 CSS 控制的，你可以改变它的外观。
例如，你可以像这样使交叉淡入淡出持续更长时间：
::view-transition-group(root) {
animation-duration: 2s;
}
这就是 View Transitions API 的神奇之处！它捕获快照，应用你的更改，用交叉淡入淡出来动画变化、平滑地呈现最终结果。
如果你对这些伪元素的作用感到好奇，这里有一个快速的解释：
::view-transition-group- 在两种状态之间设置大小和位置的动画::view-transition-image-pair- 提供混合隔离（blending isolation），以便两个图像可以正确地交叉淡入淡出::view-transition-old和::view-transition-new- 新旧快照交叉淡入淡出的视觉状态
单页视图过渡
在 SPA 中使用视图转换与我们在上一个示例中的简单 demo 没有太大的不同。在单页应用程序中，你可以使用 JavaScript 动态地修改 DOM ，比如添加或删除元素、更改类名、更改样式等，但这一切通常会在一个函数中完成，所以你可以使用 startViewTransition 包装这些函数。
下面是一个示例：
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));
}
现在，浏览器会在页面新旧状态之间进行动画，并最终给我们平滑地呈现最终页面。
多页视图过渡
到目前为止，你看到的大多数 demo 都是同一文档中做的过渡，这也是 View Transitions API 最初在浏览器中提出时要实现地概念。但是，这个 API 有一个扩展，称为“跨文档视图过渡（Cross-document View Transitions）”，它允许你在跨不同文档导航时添加过渡。换句话说，你还可以向多页面应用程序添加过渡效果。
要了解这一点，让我们先创建一个 demo，并在本文中使用。我已经把一个网站组成的几个页面，网站不依赖于任何框架实现，就是些普通的 HTML 和 CSS。你可以在这里预览网站，你可以在 GitHub 上看到源代码。
要启用这些页面之间的视图转换，你需要做的就是将以下 <meta> 标记添加到文档的 HTML <head> 中：
<meta name="view-transition" content="same-origin">
效果如下：
请记住，在撰写本文时，你需要使用 Chrome 并启用 View Transitions API for navigations 标志，正如我在文章开头所解释的那样。
会看到在切换页面时，能看到平滑的交叉淡入淡出效果。很简单吧。
这种方法被称为添加视图转换的声明性方法。它不需要添加任何 JavaScript，就能自动工作。只要声明<meta> 标记就可以了。
还没结束。View Transitions API 还允许你自定义过渡效果，甚至在导航期间为页面元素创建动画。让我们来看一下如何实现。
使用 CSS animations 自定义视图过渡
你可能并不总是需要默认的交叉淡入淡出动画。值得庆幸的是，View Transitions API 使你能够使用 CSS 中的伪元素以你想要的方式塑造动画。
使用 ::view-transition-old() 处理即将离开的状态，使用 ::view-transition-new() 处理即将进入的状态。
让我们的 demo 来一个改头换面，从交叉淡入淡出切换滑动动画：
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes slide-from-bottom {
from {
transform: translateY(50px);
}
}
@keyframes slide-to-top {
to {
transform: translateY(-50px);
}
}
::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-top;
}
::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-bottom;
}
译注：这里的进入、离开状态都同时应用了 2 个动画——除了原本的淡入淡出之外，还增加了自下而上的滑动效果。
demo 效果如下：
现在，如果我们只想将这个魔法应用于页面的一部分，而不是整个文档，该怎么办？
命名视图过渡
假设你希望一个页面上的元素平滑地过渡到另一个页面上的另一个元素。要实现这个功能，需要使用一种名为命名视图转换的方法（named view transition）。
View Transitions API 引入了一个名为 view-transition-name 的新工具属性。这个 CSS 属性允许你为这两个元素分配相同的特殊名称，这个名称用来创建命名视图转换。
这适用于 SPA 和 MPA 应用程序。让我们举一个例子来说明。
在这个例子中，我们在一个页面上有一个小图片，我们希望它在另一个页面上变形为一个更大的图片。
第一页：
.image {
view-transition-name: my-image;
}
在另一页：
.bigger-image {
view-transition-name: my-image;
}
这两个元素可以是具有不同样式的同一元素，甚至是完全不同的 HTML 元素。重要的是它们设置了一样的 view-transition-name 值，这会触发视图转换效果。
记住，你可以选择任何你喜欢的名字，但不能是 none。每个页面都要保证这些名字的唯一性。如果同一页面上的两个元素同时设置了一样的 view-transition-name 值，就不会发生转换。
你还记得我们讨论过的伪元素树吗？使用 view-transition-name 添加另一个视图过渡时，会创建一个新的分支（新的 ::view-transition-group）。下面是这个树现在的样子：
::view-transition
├─ ::view-transition-group(root)
│ └─ ::view-transition-image-pair(root)
│ ├─ ::view-transition-old(root)
│ └─ ::view-transition-new(root)
└─ ::view-transition-group(my-image)
└─ ::view-transition-image-pair(my-image)
├─ ::view-transition-old(my-image)
└─ ::view-transition-new(my-image)
Bramus 在 Codepen 上也为此制作了一个可视化显示，可以帮助理解：
这表示我们可以使用新的伪元素定制新的视图转换。
现在，让我们将视图过渡应用到 demo 中的不同元素。到目前为止，我们已经为整个页面使用了一个单一的交叉渐变动画。
让我们从网页中提取我们的大横幅（banners），这样他们就可以单独动画。对于我们的横幅，我们会应用滑入动画效果。
@keyframes slide-from-left {
from { transform: translateX(-50px); }
}
.banner {
view-transition-name: banner;
}
::view-transition-new(banner) {
animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) slide-from-left;
}
结果如下：
需要知道的是，你不需要为所有的元素添加视图过渡。只对要添加过渡效果的元素使用视图过渡。比如，本例中，我们只是设计了横幅的过渡动画，主页上的推荐部分、详细页面上的引言还使用默认的过渡效果。
即使我们的引言只出现在单个页面上，我们也可以添加一个视图转换，以便在页面加载时动画效果。
/* This element only exists on the detail page */
.blockquote {
view-transition-name: blockquote;
}
::view-transition-new(blockquote) {
animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) slide-from-bottom;
}
你可能已经注意到我们在这里没有使用 ::view-transition-old。这样做是因为我们希望进入页面时有一个动画，而当离开页面时，我们故意选择不需要滑动效果。
感谢 View Transitions API，我们可以根据自己的偏好自由地定制视图转换。
如下面的视频所示，我在 demo 中添加了一些额外的视图过渡。
你可以在这里查看 demo 的最终版本，并在 GitHub 上查看源代码。
视图过渡与可访问性
当我自己看最后一个 demo 时，感觉有很多动画，不喜欢。毕竟设计不是我的强项。这让我想到了患有前庭障碍的人，不管动画看起来有多酷，对他们来说都可能是个问题。这些用户可以告诉他们的计算机，他们想要更少的运动，这个选择是通过 CSS 设置的。
你可以使用 prefers-reduced-motion 媒体查询为这些用户停止任何过渡或选择更精细的动画。
@media (prefers-reduced-motion) {
::view-transition-old(),
::view-transition-new() {
animation: none;
}
}
使用 JavaScript 助力 CSS 带来更好体验
再看下面的 demo，如果我们想在主页和详细信息页面上看到的缩略图上添加一个视图过渡：
听起来很简单，对吧？我们只需要给予它们相同的视图过渡名称。
下面是两个页面的 HTML：
<!-- index.html -->
<ul class="testimonials">
<li>
<a>
<img class="index-thumbnail"> <!-- thumbnail on the home page -->
</a>
</li>
<!-- ... -->
</ul>
<!-- detail.html -->
<section class="case-study">
<h1>Case study title</h1>
<img class="detail-thumbnail"> <!-- thumbnail on the detail page -->
</section>
在 CSS 中：
.index-thumbnail,
.detail-thumbnail {
view-transition-name: thumbnail;
}
但是，视图转换效果还有吗？
没有！我们在本文前面提到的，视图转换名称必须在当前页面唯一。在本例中，在首页，我们有六个缩略图元素（.index-thumbnail）。在 CSS 中给所有这些都取相同的名字就会破坏过渡。那解决办法是什么？
在这个简单的例子中，当单击缩略图时，我们可以使用 JavaScript 仅在转换期间将 view-transition-name 属性应用到元素上。
indexThumbnail.onclick = () => {
indexThumbnail.style.viewTransitionName = 'thumbnail';
};
这种方法保证页面上每次只会出现唯一一个命名视图转换伪元素。
此外，我们需要从 CSS 中的选择器中删除 .index-thumbnail 来修复 demo：
.detail-thumbnail {
view-transition-name: thumbnail;
}
你可以在这里预览 demo。
当你单击 .index-thumbnail 元素时，它会设置与详细信息页面上对应元素一样的转换名称，详情页的图片使用 .detail-thumbnail 修饰，这样命名视图转换就能正常工作了。
现在明白了吗？设想一下，如果所有这些缩略图都有相同的视图过渡名称，浏览器如何知道哪一个要转换成下一页的缩略图呢？
你可以找到这个 demo 的源代码。这个脚本可以在 index.html 文件的末尾找到。
如何禁用视图过渡
关闭视图过渡的最佳方法是将元素的 view-transition-name 属性设置为 none。
当我们使用这个属性为元素指定一个名称时，它们将接收视图转换。这个属性甚至适用于根元素，当我们激活页面上的 View Transitions API 时，它会自动设置为 root 。
:root {
view-transition-name: root;
}
这是用户代理的默认样式，我们可以通过给它一个值 none 来禁用它的视图转换，如下所示：
:root {
view-transition-name: none;
}
/* or any elements */
.some-element {
view-transition-name: none;
}
使用视图过渡遇到的一个问题
在使用 View Transitions API 时我遇到了一个问题，元素在转换过程中没有正确缩放。让我们看一个例子来更好地理解。
假设你有一个缩略图，你只想在下一页上放大它的宽度。下面是 demo：
让我们使用 Chrome DevTools 来减慢动画的速度，看看发生了什么。在 DevTools 中，按 Cmd/Ctrl + Shift + P ，搜索“animation”，你可以调试页面上任何正在进行的动画。我会放慢动画速度来理解这个问题：
Box 1 保持其纵横比并按比例调整大小，这不是我们想要的行为。我们希望它的高度保持不变，同时宽度增加。
重要的是要记住，元素本身不会变形为不同的元素。相反，转换的只是这个元素的快照，尤其是在动画期间出现红框（Box 1）时视图转换API中的 ::view-transition-old 部分。由于快照是栅格化图像，在调整大小时倾向于保持其比例。
明白了原理，那么解决方案是告诉快照始终与真实的元素具有相同高度。我们可以通过将高度设置为 100% 来做到这一点：
::view-transition-old(box) {
height: 100%;
}
让我们再次调试动画：
很好，问题解决了！然而，当从第 2 页转换到第1页时，我们遇到了同样的问题。
这是因为我们只改变了 ::view-transition-old(box) 的高度。在各个伪元素表示从页面 1 移动到页面 2 时 Box1 的快照。但是当从第 2 页返回到第 1 页时，Box1 处于新状态，而不是旧状态。因此，我们应该以 ::view-transition-new(box) 为目标来调整 Box 1 在新状态下的快照（第1页）。
::view-transition-old(box),
::view-transition-new(box) {
height: 100%;
}
这使得新老快照和旧快照可以紧密地嵌入 Box 中。
现在，我们的动画按预期运行：
Astro 中的视图过渡
Astro 是第一个添加视图转换支持的 Meta 框架之一。在本节中，我们将学习如何在 Astro 项目中添加视图转换。
我们将使用在我们的实用 Astro 指南中创建的 demo 项目，并通过视图转换增强它。
在 Astro 中启用视图转换
这个步骤也适用于 Astro 3.0 之前的版本。如果你使用的是版本 3 或更高版本，视图转换已经是稳定版本的一部分，你可以跳过这一步。
首先，确保你的项目使用的是 Astro。要启用视图转换，你需要激活配置中的实验特性。
首先，你可以像这样升级你的 Astro 项目：
npm install astro@latest
打开 astro.config.js 文件并添加以下行：
import { defineConfig } from 'astro/config';
export default defineConfig({
experimental: {
viewTransitions: true
}
});
添加 <ViewTransitions /> 组件
要将视图转换全局应用到整个站点并创建 SPA 模式，需要包含 <ViewTransitions /> 组件。你可以通过在公共 <head> 或共享布局组件中添加 import 语句和组件放置来实现视图过渡。例如，在我们的项目中，我们将把它添加到 BaseLayout.astro 文件中。首先，让我们导入 ViewTransitions：
---
import { ViewTransitions } from 'astro:transitions';
---
现在，我们可以像这样使用组件：
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<ViewTransitions />
<title>{pageTitle}</title>
</head>
包含这个组件之后，你可以在网站的不同页面之间启用默认的交叉淡入淡出过渡效果。
以下是我们 demo 现在的样子：
添加单个元素过渡
为了控制页面的不同元素，Astro 给了提供了一些 transition:* 指令，你可以在你的 .astro 组件中使用。
要提供更加定制和更令人愉悦的视觉过渡，可以为需要过渡效果的不同元素指定唯一的名称。
例如，在 Astro 组件中，你可以将 transition:name 指令添加到你想要进行转换的元素中。这个指令会在后台添加 view-transition-name 的 CSS 属性，来控制过渡效果。
在我们的项目中，我们希望为每个博客文章的标题和图片有一个单独的过渡。我们是这样做的：
我们希望将卡片的缩略图转换为文章页面的博客图片。
由于名称必须是唯一的，我将在每个名称的末尾使用每个帖子的 postId。
index.astro 文件：
<ul class="blogs">
{blogs.map((blog) => (
<li>
<a href={blog.url}>
<article class="blog">
<img
transition:name={`image-${blog.frontmatter.postId}`}
src={blog.frontmatter.image.url}
/>
<h3>{blog.frontmatter.title}</h3>
<p>{blog.frontmatter.description}</p>
<span class="">Read more</span>
</article>
</a>
</li>
))}
</ul>;
我们对 BlogLayout.astro 文件中的博客图片执行相同的操作：
<BaseLayout pageTitle={frontmatter.title}>
<h1 class="title" transition:name={`title-${frontmatter.postId}`}>
{frontmatter.title}
</h1>
<p class="description">{frontmatter.description}</p>
<img
transition:name={`image-${frontmatter.postId}`}
src={frontmatter.image.url}
/>
</BaseLayout>;
这就保证了我们的视图转换名称是唯一的了。结果如下：
我们也可以为标题做同样的事情。你可以在这里查看 demo，并在 GitHub 上找到源代码。
有了这些命名的视图转换，增强你的网站就变得轻而易举了。但是 Astro 并没有止步于此——你还可以使用 transition:animate 指令来覆盖 Astro 的默认动画，从而进一步定制动画。提供的选项包括 morph、slide 和 fade。
<main transition:animate="slide">
你甚至可以自定义这些动画，如下所示：
<header transition:animate={fade({ duration: '0.4s' })}>
维护状态
Astro 允许你在路由之间共享 JavaScript 状态来实现额外功能。这是通过使用 transition:persist 指令实现的，保证你在跨页面导航时维护组件和 HTML 元素。
例如，即使你导航到包含相同视频元素的另一个页面，下面的<video> 元素仍会继续播放。这个功能也适用于向前和向后导航。
<video transition:persist>
<source src="video.mp4" type="video/mp4">
</video>
当然，更加详细的使用还需要阅读 Astro 关于 View Transitions 的文档，我们就不在本文展示了。随着 Astro 的发展，请留意后续的功能改进此、迭代更新和优化。
Nuxt 中的视图过渡
在 Nuxt.js 中，对 View Transitions 的支持是在 Nuxt 3.4 版本中作为实验性功能引入的，这个版本仍在积极开发中。
要在 Nuxt 中启用 View Transitions API，你需要在 nuxt.config.js 文件中添加以下内容：
export default defineNuxtConfig({
experimental: {
viewTransition: true
}
})
一旦启用，就会看到默认的交叉淡入淡出。你还可以以类似于使用 CSS 的方式将过渡应用于特定元素。简单地在你的 .vue 文件中使用样式标签，就像这样：
<style>
img {
view-transition-name: image;
}
</style>
Nuxt 团队提供了一个 demo，你可以在 Stackblitz 上探索：
SvelteKit 中的视图过渡
SvelteKit 从 1.24 版开始，也集成了 View Transitions API。
要在 SvelteKit 中启用视图转换，你可以使用一个名为 onNavigate 钩子的导航生命周期函数，这个函数会在呈现新页面之前在每个导航上触发。
将以下代码添加到 src/routes/+layout.svelte 文件中：
import { onNavigate } from '$app/navigation';
onNavigate((navigation) => {
if (!document.startViewTransition) return;
return new Promise((resolve) => {
document.startViewTransition(async () => {
resolve();
await navigation.complete;
});
});
});
现在，每次导航都会触发视图转换。
你可以在 Svelte 博客上阅读更多关于这方面的信息。
浏览器兼容性
你可以在 caniuse.com 上查看浏览器支持。在撰写本文时，只有 Chrome 和 Edge 支持 View Transitions API。然而，这不耽误你的使用，渐进式增强可能是一种有用的策略。
通过渐进式增强，你可以在基础功能上添加额外和更高级的功能。这样，使用现代浏览器的用户将体验到额外的炫酷功能，而使用其他浏览器的用户仍然可以正常使用访问网站。
因此，即使不是所有浏览器都支持 View Transitions API，但使用渐进式增强方法可以让你为每个可以使用 View Transitions API 的用户提供出色的体验。
总结
创建平滑的页面过渡一直是 Web 开发的目标。View Transitions API 是实现这一目标的一大进步。它允许开发人员在他们的网站上添加有吸引力的动画。
如果你想深入了解 View Transitions API，请花些时间阅读 Jake Archibald 关于此主题的文章。他是这个 API 背后的主要人物之一。在这篇文章中，我用自己简单的话解释了我从那篇文章中学到的东西。
