GitHub 项目：next-view-transitions
仓库地址：https://github.com/shuding/next-view-transitions
星级：2388 | 作者：树丁
项目描述：在 Next.js App Router 中使用 CSS View Transitions API。
===================================================
自述文件内容：
# 下一个视图转换
在 Next.js App Router 中使用 [View Transitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)。
[**演示**](https://next-view-transitions.vercel.app)。
## 免责声明
该库针对视图转换和 Next.js App Router 的基本用例。随着并发渲染、Suspense 和流媒体等更复杂的应用程序和用例的出现，未来仍需要将新的原语和 API 开发为 React 和 Next.js 的核心（[更多](https://twitter.com/shuding_/status/1779583281920344448)）。
## 安装
使用您最喜欢的包管理器来安装“next-view-transitions”包。例如：
````bash
pnpm 安装下一个视图转换
````
## 用法
使用布局文件中的“
”组件包裹您的内容：
````jsx
从 'next-view-transitions' 导入 { ViewTransitions }
导出默认函数Layout({children}){
返回（
<视图转换>
<正文>
{孩子}
）
}
````
然后，对需要触发视图转换的链接使用“”组件：
````jsx
从“下一个视图转换”导入{链接}
导出默认函数 Component() {
返回（
转到/about
）
}
````
或者使用“useTransitionRouter”挂钩进行编程导航：
````jsx
从 'next-view-transitions' 导入 { useTransitionRouter }
导出默认函数 Component() {
const 路由器 = useTransitionRouter()
返回（
<按钮onClick={() => {
// 支持所有 Next.js 路由器方法
路由器.push('/about')
}}>转到/about
）
}
````
就是这样！
## 许可证
麻省理工学院。