探索 View Transitions
1/23/2023
什么是 View Transitions?
Web 平台一直以来都缺少原生的页面切换动画能力。过去我们通常需要借助 SPA (单页应用) 框架和复杂的路由库来实现这一点。
但现在，View Transitions API 改变了游戏规则。
在 Astro 中使用
在 Astro 中启用它非常简单，只需要引入 ClientRouter 组件：
---
import { ClientRouter } from 'astro:transitions';
---
<head>
<ClientRouter />
</head>核心优势
- 原生性能：浏览器原生支持，无需沉重的 JS 库。
- 状态保持：支持在页面导航时保持部分组件状态。
- 声明式：通过简单的 CSS 属性即可控制动画。
试试看
点击顶部的导航栏，看看页面是如何平滑过渡的！