next-view-transitions

> 前端框架

开源

在 Next.js 应用程序路由器中使用 CSS 视图过渡 API。

2.4K stars0 点赞0 次浏览

访问官网 GitHub

工具介绍

在 Next.js 应用程序路由器中使用 CSS 视图过渡 API。

next-view-transitions

Use View Transitions API in Next.js App Router.

Demo.

Disclaimer

This library is aimed at basic use cases of View Transitions and Next.js App Router. With more complex applications and use cases like concurrent rendering, Suspense and streaming, new primitives and APIs still need to be developed into the core of React and Next.js in the future (more).

Installation

Use your favorite package manager to install the next-view-transitions package. For example:

bash

pnpm install next-view-transitions

Usage

Wrap your content with the <ViewTransitions> component inside the layout file:

javascript

import { ViewTransitions } from 'next-view-transitions'

export default function Layout({ children }) {
  return (
    <ViewTransitions>
      <html lang='en'>
        <body>
          {children}
        </body>
      </html>
    </ViewTransitions>
  )
}

Then, use the <Link> component for links that need to trigger a view transition:

javascript

import { Link } from 'next-view-transitions'

export default function Component() {
  return (
    

  )
}

Or use the useTransitionRouter hook for programmatic navigation:

javascript

import { useTransitionRouter } from 'next-view-transitions'

export default function Component() {
  const router = useTransitionRouter()

  return (
    

  )
}

That's it!