ViewTransition

viewTransition 是一个实验性标志，用于启用 React 中新的实验性 View Transitions API。此 API 允许你利用原生的 View Transitions 浏览器 API 在 UI 状态之间创建无缝过渡。

¥viewTransition is an experimental flag that enables the new experimental View Transitions API in React. This API allows you to leverage the native View Transitions browser API to create seamless transitions between UI states.

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

¥To enable this feature, you need to set the viewTransition property to true in your next.config.js file.

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

module.exports = nextConfig

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

¥Important Notice: This feature is not developed or maintained by the Next.js team — it is an experimental API from the React team. It is still in early stages and not recommended for production use. The implementation is still being iterated on, and its behavior may change in future React releases. Enabling this feature requires understanding the experimental nature of the API. To fully grasp its behavior, refer to the React pull request and related discussions.

用法

¥Usage

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

¥Once enabled, you can import the ViewTransition component from React in your application:

import { unstable_ViewTransition as ViewTransition } from 'react'

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

¥However, documentation and examples are currently limited, and you will need to refer directly to React’s source code and discussions to understand how this works.

现场演示

¥Live Demo

查看我们的 Next.js 查看过渡演示 以了解此功能的实际效果。

¥Check out our Next.js View Transition Demo to see this feature in action.

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

¥As this API evolves, we will update our documentation and share more examples. However, for now, we strongly advise against using this feature in production.