View Transitions API 是一组新的平台 API，用于在浏览器端开启类似 native 的页面切换动画。

早期的 View Transitions 只支持 SPA，需要使用 document.startViewTransition 等 JS API 进行调用，不支持在 MPA 多页面中使用。

众所周知，Astro 是一个 MPA 多页面框架，为了让开发者可以尝试 View Transitions 动画，在 Astro 中，对早期的 View Transitions API 进行了封装，注入一个 JS router 来模拟 SPA 的行为。

而在最新发布的 Chrome 126 版本中，支持了在 MPA 多页面中启用 View Transitions。不需要 JavaScript，只需要在页面中添加一个 @view-transition 的 at-rule 即可。

如何使用

接下来我们以 Astro blog 模板为例，演示如何在 Astro 中 0 js 开启 View Transitions 动画。

初始化项目

npm create astro@latest -- --template blog

执行以上命令安装，根据提示初始化项目。

启用 View Transitions

在 src/components/BaseHead.astro 中添加以下代码：

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

@view-transition 是一个新的 CSS at-rule，用于在 MPA 中启用 View Transitions。它需要在你想要过渡的两个页面中同时添加，所以这里把它放在了 BaseHead.astro 公用组件中。

添加 view-transtion-name

在文章列表页 src/pages/index.astro 为文章列表元素的图片添加 view-transition-name：

<img width={720} height={360} src={post.data.heroImage} alt="" style={{
  "view-transition-name": post.slug,
}}/>

在文章详情页 src/pages/blog/[slug].astro 为文章详情页的图片添加 view-transition-name：

<div class="hero-image">
  {heroImage && <img width={1020} height={510} src={heroImage} alt="" style={{
    "view-transition-name": slug,
  }}/>}
</div>

在两个页面中，使用同样的 view-transition-name，这样在页面切换时，浏览器就会自动为这两个元素添加过渡动画。

这里使用了 slug，注意，BlogPost 没有接受 slug 参数，所以需要在 src/pages/blog/[slug].astro 中手动传递 slug。具体最后看 GitHub。

本地预览

执行 npm run dev 运行项目，注意，需要将 Chrome 升级到 126 版本，然后在浏览器中打开 http://localhost:3000，点击文章列表页和文章详情页，查看过渡动画效果。

以上就是效果展示，非常丝滑的类似 native 的动画体验。

总结

我们使用了非常少的 CSS 代码，没有使用 JS，就实现了类似 native 的页面切换动画。这是一个非常简单的例子，你可以根据自己的需求，添加更多的过渡效果。

以上代码示例在我的 GitHub: 0js-view-transtion-demo。

加我微信 liruifengv2333，进群交流，抱团取暖。

• 新生代程序员群
• Astro 学习交流群

关注公众号 SayHub，带来更多原创内容。

很高兴见到你，欢迎来玩儿~