访问官网
Github
文档next-view-transitions
在 Next.js 的 App Router 中使用 View Transitions API。
演示。
免责声明
该库旨在处理 View Transitions 和 Next.js App Router 的基本使用场景。对于更复杂的应用和用例，如并发渲染、Suspense 和流式传输，未来还需要在 React 和 Next.js 的核心中开发新的原语和 API（更多信息）。
安装
使用你喜欢的包管理器安装 next-view-transitions 包。例如：
pnpm install next-view-transitions
使用方法
在布局文件中用 <ViewTransitions> 组件包裹你的内容：
import { ViewTransitions } from 'next-view-transitions'
export default function Layout({ children }) {
return (
<ViewTransitions>
<html lang='en'>
<body>
{children}
</body>
</html>
</ViewTransitions>
)
}
然后，对需要触发视图转换的链接使用 <Link> 组件：
import { Link } from 'next-view-transitions'
export default function Component() {
return (
<div>
<Link href='/about'>转到 /about</Link>
</div>
)
}
或者使用 useTransitionRouter 钩子进行编程式导航：
import { useTransitionRouter } from 'next-view-transitions'
export default function Component() {
const router = useTransitionRouter()
return (
<div>
<button onClick={() => {
// 支持所有 Next.js 路由方法
router.push('/about')
}}>转到 /about</button>
</div>
)
}
就是这样！
许可证
MIT。
