🟢 浏览器支持 View Transitions

Next.js View Transitions

通过 View Transitions API 在 Next.js App Router 中实现页面过渡动画。

安装

pnpm add next-view-transitions

基础用法

在 layout 中包裹 ViewTransitions：

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

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

使用 Link 和 useTransitionRouter

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

// Link：触发默认淡入淡出过渡
<Link href="/about">跳转</Link>

// useTransitionRouter：自定义动画
const router = useTransitionRouter()
router.push('/about', { onTransitionReady: myAnimation })

共享元素过渡（CSS）

/* 为元素命名，跨页面自动过渡 */
<h1 style={{ viewTransitionName: 'hero-title' }}>标题</h1>
<div className={styles.container}>内容</div>

/* styles.module.css */
.container { view-transition-name: container-move; }