零 JavaScript 视图转换

作者
Fred Schott

这是我们“Astro 的未来”系列文章的第一部分，涵盖了 Astro 计划于 2024 年推出的三项主要新功能。本文介绍了对 View Transitions API 的更新，Astro 现在可以利用它实现原生的、类应用程序的页面导航，而无需任何一行 JavaScript 代码。

View Transitions API 是一组新的平台 API，可实现浏览器页面间的原生转换。过去，这只能在大量使用 JavaScript 的单页应用（SPA）中实现，但最近的进展正在将原生页面转换带到 Web 平台。

自 Astro 2.9 发布以来，Astro 用户就已经可以抢先体验视图转换功能。由于浏览器最初的限制，我们早期的支持通过在页面上注入一个 JavaScript 路由器来为您管理动画。这从未被视为一个长期解决方案，但它成功地为我们的用户提供了一个早期探索的试验场

观看 Joe Bell 演示视图转换。

体验 Maxi Ferreira 制作的此实时演示。

我们当时认为，主流网络浏览器会持续改进，总有一天我们可以完全移除我们的 JavaScript 路由器垫片。总有一天，当用户点击链接时，该点击将作为浏览器正常页面跳转流程的一部分，触发转换动画。

我很高兴地宣布，这一天终于到来了。Chrome 126（上周发布）和 Microsoft Edge 126（本周发布）都支持“跨文档视图转换”，从而在 Astro 中实现了零 JavaScript 视图转换。

演示

Chrome 和 Edge 都会逐步推出新的浏览器版本，因此在运行演示之前请确保您使用的是 126 版本。在 Chrome 中，您可以在 chrome://settings/help 查看当前版本。如果您的浏览器尚未提供升级，请稍后查看或使用 Beta 版或 Canary 版发布渠道。

打开 astro-zerojs-transitions.vercel.app 演示以在您的浏览器中体验零 JavaScript 视图转换。您可以查看浏览器的“网络”面板，验证每次链接点击都触发了完整的页面加载，并且没有向浏览器发送任何 JavaScript。如果您的浏览器支持此功能，演示效果应如下所示

Spotify 克隆版 使用 Astro 视图转换构建

如果您的浏览器不支持最新的跨域视图转换，您的网站仍将按预期运行和显示内容。但是，动画将被禁用，页面导航将与您浏览器中的任何其他导航行为一致（没有动画效果）。

启用零 JavaScript 视图转换

要利用原生的新 View Transition API，只需将 @view-transition 规则添加到您的网站即可。这就是您需要的所有 CSS 代码

<style>
  @view-transition {
    navigation: auto; /* enabled! */
  }
</style>

注意：某些代码编辑器（例如 VSCode）中内置的 CSS 语法高亮工具可能难以解析较新的 @view-transition 规则语法。您可以将类似 /* enabled! */ 的注释添加到您的 CSS 中，作为语法高亮工具的临时修复方案。

要启用跨文档视图转换，转换的“两端”都必须包含此规则。共享页面布局组件是将其添加到您的代码库中的好地方。

升级现有项目

如果您已经在使用由 <ViewTransitions /> 组件驱动的 Astro 视图转换，那么现在可以安全地移除该组件并将其替换为 @规则。这将从您的页面中移除注入的向后兼容 JavaScript 路由器，从而降低客户端代码的整体复杂性。

---
 import { ViewTransitions } from "astro:transitions";
---
<head>
  <ViewTransitions fallback="none" />
  <style>
    @view-transition {
      navigation: auto;
    }
  <style>
</head>

如果您仍希望视图转换在旧版浏览器中运行，您可以继续使用我们的向后兼容 <ViewTransitions /> 组件。您可以在准备好时进行迁移。目前，我们没有计划移除对 <ViewTransitions /> 组件的支持。

transition:persist 又如何呢？

持久元素转换成为 Astro 中的热门功能。transition:persist 指令告诉 Astro 在导航时保持元素状态不变，而不会中断或破坏其状态。这使得音频和视频播放器等 UI 能够在页面之间继续播放，就像 Maxi Ferreira 的音乐播放器演示中那样。

遗憾的是，浏览器中的原生跨文档导航尚未支持此功能。对持久音频和视频播放器的原生支持可能在未来推出，但在此期间，如果您需要此附加功能，可以继续使用我们的 <ViewTransitions /> 组件。

Astro 的未来

使用链接进行导航是网络的基本行为。我们相信这是 Chromium 和浏览器规范制定过程中近年来最重要的进展之一。我们很高兴能继续与 Google Chrome 和其他浏览器供应商合作，共同推出此新 API。

开发者现在即可利用原生视图转换功能，也可以等待其向更多用户推出。无论何时您准备好启用（或迁移）此功能，基本上只需一行 CSS 代码即可完成。

要开始使用，您可以了解更多关于Astro 视图转换的信息。我们将在未来几周内更新文档，以涵盖如何使用这些新的原生浏览器 API。