viewTransition

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

¥viewTransition is an experimental flag that enables the new 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.

重要提示：<ViewTransition> 组件已在 React 的 Canary 版本中提供。experimental.viewTransition 仅用于与 Next.js 功能进行更深入的集成，例如自动为导航使用 添加过渡类型。Next.js 特有的过渡类型尚未实现。

¥Important Notice: The <ViewTransition> Component is already available in React's Canary release channel. experimental.viewTransition is only required to enable deeper integration with Next.js features e.g. automatically adding Transition types for navigations. Next.js specific transition types are not implemented yet.

用法

¥Usage

你可以在应用中从 React 导入 <ViewTransition> 组件：

¥You can import the <ViewTransition> Component from React in your application:

现场演示

¥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.