今天，我们想更详细地介绍 Chrome 和 Astro 使用 View Transitions API 的历程。其中包括 Astro 社区的早期接受和试验 API 的途径，向更广泛的社区强调了其可能性。我们很高兴与您分享更多关于 Astro 3.0 中新增的内置视图转换支持的信息！
背景
网页不同状态之间的无缝转换（称为“状态转换”）一直是在网页上打造无缝动画体验的一个复杂方面。尽管 CSS 过渡、CSS 动画和 Web Animation API 等工具可以使用，但创建状态过渡仍然是一项艰巨的任务。其中一个挑战是处理与传出元素的交互，这会使过渡变得更加复杂。
此外，让辅助设备保持阅读位置和焦点也很困难。而且，处理滚动位置差异会使状态转换成为一个繁琐的过程。所有这些因素都会加剧在网页上各种元素之间实现平滑过渡的复杂性
View Transitions API 应运而生，是浏览器针对这些挑战推出的一种解决方案。这一新 API 提供了一种更简便的方式，只需一步即可更改 DOM，同时创建两种状态之间的动画转换。
在 Chrome 111 中推出 View Transitions API，标志着我们开始朝着更远大的愿景对所有网站（而不仅仅是基于 JavaScript 的 Web 应用）提供过渡支持。未来的增强功能也很快会陆续推出。Chrome 未来可能会探索令人兴奋的新增功能，例如跨文档转换、合成器驱动的动画、限定范围的转换，以及嵌套转换组。
使用视图转换的早期探索
Chrome 使用 View Transitions API 的经历并非孤军奋战。多年来，开发者、框架作者和 CSS 工作组的反馈和协作在塑造了这一功能方面发挥了重要作用。
在早期阶段，开发者实验发挥了关键作用。该 API 的早期版本不支持 CSS 动画，并且过渡效果受限于一些限制性的预设。早期反馈明确，开发者希望过渡能够完全自定义和富有表现力。这种来回协作的设计确保了 API 在设计时兼顾了良好的默认值、可扩展性和自定义。
Astro 是很早就实施了 View Transitions 的框架之一。本文的其余部分来自 Astro 团队的观点，他们将分享他们找到、采用并将视图转换作为 Web 开发体验的首要考虑因素的经验。
太空人为何下注视图转换
长期以来，Astro 一直在寻找类似 View Transitions 的功能。Astro 是一个 JavaScript Web 框架，可服务器将界面组件渲染为轻量级 HTML，以提高网页加载速度。Astro 有意将尽可能多的工作量移出客户端设备。Astro 网站使用原生浏览器页面导航，而其他 Web 框架可能会改用 JavaScript 客户端路由来劫持浏览器导航。
这一权衡给 Astro 团队带来了挑战：Astro 如何为页面过渡添加动画效果，并在不采用客户端路由的情况下提供类似应用的界面持久性？
View Transitions 就是您的不二之选。通过视图转换，Astro 可以提供与大量 JavaScript SPA Web 框架相同的路由功能，但不会产生客户端路由的性能和复杂性开销。其他框架将视图转换作为可选的实现细节，但对 Astro 而言则要大得多。
Astro 团队必须回答的下一个问题是“如何实现？”。该团队通过 Turbo、Swup 和 Livewire 等项目寻找灵感，甚至在 Astro 内部设计了一些类似方法的原型。
最早的尝试之一就是采用整页“智能转换”，这种转换可自动将每个新的 HTML 页面与当前 HTML 进行比较，然后尝试使用 JavaScript 一次性替换所有元素。虽然很聪明，但容易出错。
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
幸运的是，Astro 社区表明，View Transitions API 的功能已经非常强大，并没有过度复杂。看到一些早期的演示后，Astro 团队便被深深吸引，他们希望打造一个尽可能与浏览器 API 尽可能匹配的简单 Astro API。视图转换不是隐藏在 Astro 中的不可见实现细节，而是直接提供给开发者。使 Astro 直接与 Web 平台保持一致，并降低前端的整体复杂性。
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
工作变得非常简单：将新的 View Transitions API 引入 Astro，并提供自动回退功能，从而为尽可能多的网站和浏览器带来方便。后备支持至关重要，因为大多数浏览器（Chrome 之外）尚未提供对原生视图转换的全面支持。
在 Astro 中发布官方支持
Astro 在 Astro 2.9 中发布了实验性视图转换支持。员工很快就得到了正面回复。开发者们开始分享许多不同应用场景的精彩演示，在某些情况下，甚至还将其全部推向了生产环境。
Astro 3.0 最终确定了支持情况，并为所有用户取消了新版 View Transitions API 的标记。这些新 API 现已准备好进行实验，或一次全部采用。
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
将 Astro 与平台 API 保持一致的一个意外好处是，能够尝试基于原生 View Transitions API 构建新功能。例如，新的 Astro transition:persist 指令允许任何元素在整页导航中始终保留。这可为长期存在的元素（例如持久性音频和视频播放器）提供支持，而这种功能过去只能在重量级 JavaScript SPA 中实现。
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
Astro 还可以免费为开发者提供更符合人体工程学的视图过渡效果。例如，该团队已经为动态 HTML 添加了对自定义前进/后退动画和动画的支持。仅使用较低级别的 API 很难实现这两项功能，但在 Astro 中，它们几乎毫不费力。
目前，这些功能仅在 Astro 中推出，但 Astro 团队希望将自己的经验反馈给规范作者和工作组，以便在将来改进浏览器方面。例如，通过密切监控提案，更轻松地在 CSS 中共享动画。
接下来该怎么做？
Web 上的视图转换的前景是光明的。Astro、Nuxt 和 HTMX 均已提供一定程度的支持，许多其他公司已表现出兴趣。
Chrome 团队对 Astro 的原生视图转换支持感到非常兴奋。这是 Web 开发的重要一步，能够实现更流畅、更动态的用户体验。各位开发者，我们建议您深入了解 Astro 3.0 中的“View Transitions”（视图转换）。无论您是要创建新的着陆页还是升级现有网站，这些增强功能都会带来颠覆性变化。View Transitions 帮助填补了 SPA 和 MPA 之间的缺口。Chrome 非常希望了解在支持 SPA 和/或 MPA 方面是否还有其他方面的不足。欢迎随时在 View Transitions WICG GitHub 代码库中发表评论，进一步讨论此问题。
看到过的创新演示和应用程序已经给我们带来了灵感，我们迫不及待地想看到更多。您使用 View Transitions 所做的工作将塑造 Web 的未来。在 Astro 中试用 View Transitions，分享您的作品，让我们一起继续这一旅程。