今天，我们想详细介绍一下 Chrome 和 Astro 在使用 View Transitions API 方面取得的成就。这包括 Astro 社区如何早期接受并试用该 API，以及如何向更广泛的社区展示该 API 的可能性。我们还非常高兴地向大家介绍 Astro 3.0 中对 View 转换的新内置支持！
背景
在网页的不同状态之间实现流畅的转换（称为状态转换）一直是构建流畅动画体验的复杂方面。尽管 CSS 过渡、CSS 动画和 Web 动画 API 等工具已面世，但创建状态转换仍然是一项艰巨的任务。其中一个挑战是处理传出元素的互动，这可能会使转场效果变得更加复杂。
此外，很难为辅助设备保持阅读位置和焦点。此外，处理滚动位置差异会使状态转换变得繁琐。所有这些因素都导致在网页上的各种元素之间实现流畅的转换变得非常复杂
View Transitions API 应运而生，成为浏览器应对这些挑战的解决方案。这个新 API 提供了一种更简单的方法，可让您在单个步骤中更改 DOM，同时在两种状态之间创建动画转换。
在 Chrome 111 中推出 View Transitions API 标志着我们开始着手实现一个更宏伟的愿景，即为所有网站（而不仅仅是基于 JavaScript 的 Web 应用）提供过渡效果支持。我们还将推出更多增强功能。Chrome 未来可能会探索一些令人兴奋的新功能，例如跨文档转换、由合成器驱动的动画、作用域转换和嵌套转换组。
使用视图转换进行的早期探索
Chrome 在使用 View Transitions API 的过程中并非孤军奋战。在过去几年中，开发者、框架作者和 CSS 工作组的反馈和协作对该功能的形成起到了至关重要的作用。
在早期，开发者实验发挥了至关重要的作用。该 API 的早期版本不支持 CSS 动画，过渡仅限于少数限制性预设。早期反馈明确表明，开发者希望过渡效果能够完全自定义且富有表现力。这种反复协作确保了 API 的设计在良好的默认值、可扩展性和自定义性之间取得了平衡。
Astro 是早期就开始使用视图转换的框架之一。本文的其余部分将从 Astro 团队的角度出发，分享他们发现、采用和将 View 转换置于 Web 开发体验中心位置的经验。
Astro 为何看好视图转换
Astro 一直在寻找类似 View 转换的功能。Astro 是一个 JavaScript 网站框架，可将界面组件服务器呈现为轻量级 HTML，从而加快网页加载速度。Astro 会刻意将尽可能多的工作从客户端设备移出。Astro 网站使用原生浏览器页面导航，而其他 Web 框架可能会改用 JavaScript 客户端路由来劫持浏览器导航。
这种权衡给 Astro 团队带来了挑战：Astro 如何在不采用客户端路由的情况下为页面过渡添加动画效果，并在各个页面之间提供类似应用的界面持久性？
视图过渡就是答案。借助 View 转换，Astro 可以提供与 JavaScript 占主导地位的 SPA Web 框架提供的相同路由功能，但没有客户端路由的性能和复杂性开销。其他框架将 View 转换视为可选的实现细节，但对于 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 除外）尚未完全支持原生 View 转换。
在 Astro 中推出官方支持
Astro 在 Astro 2.9 中发布了实验性 View 转换支持。我们立即收到了积极的回复。开发者开始分享许多不同用例的出色演示，在某些情况下，甚至将所有这些内容发布到了生产环境。
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 还可以让 View 转换更符合开发者的工效学要求。例如，该团队已添加对自定义前进/后退动画和动态 HTML 动画的支持。这两项功能很难仅使用低级 API 实现，但在 Astro 中，它们几乎可以轻松实现。
这些功能目前仅在 Astro 中提供，但 Astro 团队希望将他们的经验反馈给规范作者和工作组，以便日后改进浏览器。例如，通过密切监控提案，以便更轻松地在 CSS 中分享动画。
接下来该怎么做？
网页上的 View 转场效果前景一片光明。Astro、Nuxt 和 HTMX 都已提供一定程度的支持，许多其他框架也表达了兴趣。
Chrome 团队很高兴 Astro 支持原生 View 转换。这对 Web 开发而言是一大进步，可提供更流畅、更动态的用户体验。开发者，我们建议您深入了解 Astro 3.0 中的 View 转换。无论您是创建新的着陆页还是升级现有网站，这些增强功能都将带来革命性的变化。视图转换有助于弥补 SPA 和 MPA 之间可实现功能的差距。Chrome 非常希望了解您是否认为 SPA 和/或 MPA 的支持还有其他缺口。欢迎随时在 View Transitions WICG GitHub 代码库中发表评论，进一步讨论此问题。
我们已经从所见的创新演示和应用中获得了启发，并期待看到更多精彩内容。您对 View 转换的贡献正在塑造 Web 的未来。在 Astro 中试用 View 转换，分享您的作品，让我们一起继续探索。