viewTransition

viewTransition 是一个实验性标志，用于在 React 中启用新的实验性 视图过渡 API (View Transitions API)。该 API 允许您利用浏览器原生的视图过渡功能，在 UI 状态之间创建无缝过渡效果。

要启用此功能，您需要在 next.config.js 文件中将 viewTransition 属性设置为 true。

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    viewTransition: true,
  },
}

module.exports = nextConfig

重要提示：此功能并非由 Next.js 团队开发或维护 —— 它是 React 团队提供的实验性 API。目前仍处于 早期阶段，不建议在生产环境中使用。其实现仍在迭代中，未来 React 版本可能会更改其行为。 启用此功能需要充分理解该 API 的实验性质。要全面掌握其行为，请参阅 React 拉取请求 及相关讨论。

使用方法

启用后，您可以在应用中从 React 导入 ViewTransition 组件：

import { unstable_ViewTransition as ViewTransition } from 'react'

不过当前文档和示例较为有限，您需要直接参考 React 的源代码和讨论来理解其工作原理。

实时演示

查看我们的 Next.js 视图过渡演示 了解实际效果。

随着该 API 的发展，我们将更新文档并提供更多示例。但目前我们强烈建议不要在生产环境中使用此功能。