ViewTransition

viewTransition 是一个实验性标志，它启用了新的实验性 View Transitions API 在 React 中。此 API 允许您利用原生 View Transitions 浏览器 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 pull request 和相关讨论。

用法

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

import { unstable_ViewTransition as ViewTransition } from 'react'

但是，文档和示例目前有限，您需要直接参考 React 的源代码和讨论来了解其工作原理。

在线演示

查看我们的 Next.js View Transition 演示 以查看此功能的实际效果。

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