Back to Details

view-transitions

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

View Transitions

View Transitions

Part of Agent Skills™ by googleadsagent.ai™
属于 Agent Skills™ 的一部分，由 googleadsagent.ai™ 提供

Description

描述

View Transitions implements the React View Transition API for seamless animated transitions between UI states and routes. This skill covers the 
<ViewTransition>
component, 
addTransitionType
for classifying transitions, CSS pseudo-elements for animation control, shared element transitions across routes, and integration with Next.js App Router.
View transitions eliminate the jarring jump between pages that makes web applications feel inferior to native apps. By capturing a snapshot of the outgoing state and cross-fading it with the incoming state, the browser creates a smooth visual continuity that preserves user context during navigation. React's implementation hooks into the concurrent rendering model, enabling transitions to be interruptible and prioritized.
Shared element transitions take this further: a thumbnail on a list page morphs into a full-size hero image on the detail page, maintaining visual identity across route changes. The CSS 
view-transition-name
property establishes the relationship between elements, and the browser handles the interpolation automatically.
View Transitions 实现了 React View Transition API，用于在 UI 状态和路由之间提供无缝的动画过渡。该 skill 涵盖 
<ViewTransition>
组件、用于对过渡进行分类的 
addTransitionType
、用于控制动画的 CSS 伪元素、跨路由的共享元素过渡，以及与 Next.js App Router 的集成。
View Transition 可以消除页面切换时令人不适的跳跃感，让 Web 应用不再显得逊于原生应用。浏览器会捕获离开状态的快照，并将其与进入状态交叉淡入淡出，从而形成平滑的视觉连续性，在导航过程中保留用户上下文。React 的实现接入了并发渲染模型，使过渡可以被中断并获得优先级。
共享元素过渡更进一步：列表页面中的缩略图会变形为详情页面中的全尺寸主视觉图，在路由变化过程中保持视觉标识的一致。CSS 的 
view-transition-name
属性用于建立元素之间的关联，浏览器会自动处理插值。

Use When

使用时机

  • Navigating between routes in a React or Next.js application
  • Animating list-to-detail transitions with shared elements
  • Adding entrance/exit animations to page content
  • Implementing back/forward navigation with directional animations
  • The user requests smooth page transitions or "native-like" feel
  • Replacing manual FLIP animation implementations
  • 在 React 或 Next.js 应用中进行路由导航
  • 使用共享元素实现列表到详情的过渡动画
  • 为页面内容添加进入/退出动画
  • 为前进/后退导航添加方向动画
  • 用户需要平滑的页面过渡或“原生应用般”的体验
  • 替换手动 FLIP 动画实现

How It Works

工作原理

mermaid
sequenceDiagram
    participant User
    participant React
    participant Browser
    participant CSS

    User->>React: Navigate to new route
    React->>Browser: startViewTransition()
    Browser->>Browser: Capture old state snapshot
    React->>React: Update DOM (concurrent)
    Browser->>Browser: Capture new state snapshot
    Browser->>CSS: Apply ::view-transition pseudo-elements
    CSS->>Browser: Animate old → new
    Browser->>User: Smooth transition rendered
The browser orchestrates the transition lifecycle: snapshot capture, DOM update, and cross-fade animation. React's 
<ViewTransition>
component manages the timing and classification, while CSS pseudo-elements control the visual animation.
mermaid
sequenceDiagram
    participant User
    participant React
    participant Browser
    participant CSS

    User->>React: Navigate to new route
    React->>Browser: startViewTransition()
    Browser->>Browser: Capture old state snapshot
    React->>React: Update DOM (concurrent)
    Browser->>Browser: Capture new state snapshot
    Browser->>CSS: Apply ::view-transition pseudo-elements
    CSS->>Browser: Animate old → new
    Browser->>User: Smooth transition rendered
浏览器负责编排整个过渡生命周期，包括快照捕获、DOM 更新和交叉淡入淡出动画。React 的 
<ViewTransition>
组件负责管理时机和分类，而 CSS 伪元素用于控制视觉动画。

Implementation

实现

Basic Route Transition

基础路由过渡

tsx
import { ViewTransition } from "react";
import { useRouter } from "next/navigation";

function PageLayout({ children }: { children: React.ReactNode }) {
  return (
    <ViewTransition>
      {children}
    </ViewTransition>
  );
}
tsx
import { ViewTransition } from "react";
import { useRouter } from "next/navigation";

function PageLayout({ children }: { children: React.ReactNode }) {
  return (
    <ViewTransition>
      {children}
    </ViewTransition>
  );
}

Shared Element Transition

共享元素过渡

tsx
function ProductCard({ product }: { product: Product }) {
  return (
    <Link href={`/products/${product.id}`}>
      <ViewTransition name={`product-${product.id}`}>
        <img src={product.image} alt={product.name} />
      </ViewTransition>
      <h3>{product.name}</h3>
    </Link>
  );
}

function ProductDetail({ product }: { product: Product }) {
  return (
    <article>
      <ViewTransition name={`product-${product.id}`}>
        <img src={product.image} alt={product.name} />
      </ViewTransition>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </article>
  );
}
tsx
function ProductCard({ product }: { product: Product }) {
  return (
    <Link href={`/products/${product.id}`}>
      <ViewTransition name={`product-${product.id}`}>
        <img src={product.image} alt={product.name} />
      </ViewTransition>
      <h3>{product.name}</h3>
    </Link>
  );
}

function ProductDetail({ product }: { product: Product }) {
  return (
    <article>
      <ViewTransition name={`product-${product.id}`}>
        <img src={product.image} alt={product.name} />
      </ViewTransition>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
    </article>
  );
}

Directional Navigation Animation

方向导航动画

tsx
import { addTransitionType } from "react";

function handleNavigation(direction: "forward" | "back") {
  addTransitionType(direction);
  router.push(targetUrl);
}
css
::view-transition-old(root) {
  animation: slide-out 200ms ease-in;
}
::view-transition-new(root) {
  animation: slide-in 200ms ease-out;
}

@keyframes slide-out { to { transform: translateX(-100%); opacity: 0; } }
@keyframes slide-in { from { transform: translateX(100%); opacity: 0; } }

/* Reverse for back navigation */
[data-transition-type="back"]::view-transition-old(root) {
  animation: slide-in 200ms ease-in reverse;
}
[data-transition-type="back"]::view-transition-new(root) {
  animation: slide-out 200ms ease-out reverse;
}
tsx
import { addTransitionType } from "react";

function handleNavigation(direction: "forward" | "back") {
  addTransitionType(direction);
  router.push(targetUrl);
}
css
::view-transition-old(root) {
  animation: slide-out 200ms ease-in;
}
::view-transition-new(root) {
  animation: slide-in 200ms ease-out;
}

@keyframes slide-out { to { transform: translateX(-100%); opacity: 0; } }
@keyframes slide-in { from { transform: translateX(100%); opacity: 0; } }

/* Reverse for back navigation */
[data-transition-type="back"]::view-transition-old(root) {
  animation: slide-in 200ms ease-in reverse;
}
[data-transition-type="back"]::view-transition-new(root) {
  animation: slide-out 200ms ease-out reverse;
}

Best Practices

最佳实践

  • Assign unique 
    view-transition-name
    values—duplicates cause silent failures
  • Keep transition durations under 300ms to feel responsive, not sluggish
  • Respect 
    prefers-reduced-motion
    by disabling or shortening animations
  • Use 
    addTransitionType
    to differentiate forward, back, and lateral navigation
  • Test transitions with slow network and CPU throttling enabled
  • Provide fallback behavior for browsers that do not support the View Transition API
  • 为 
    view-transition-name
    分配唯一值——重复值会导致静默失败
  • 将过渡时长控制在 300ms 以下，以保持响应迅速，避免感觉迟缓
  • 遵循 
    prefers-reduced-motion
    ，禁用或缩短动画
  • 使用 
    addTransitionType
    区分前进、后退和横向导航
  • 在启用慢速网络和 CPU 节流的情况下测试过渡
  • 为不支持 View Transition API 的浏览器提供回退行为

Platform Compatibility

平台兼容性

PlatformSupportNotes
CursorFullReact + Next.js aware
VS CodeFullCSS pseudo-element support
WindsurfFullFrontend framework support
Claude CodeFullCode generation
ClineFullReact component generation
aiderPartialLimited CSS context
平台支持情况备注
Cursor完全支持支持 React + Next.js
VS Code完全支持支持 CSS 伪元素
Windsurf完全支持支持前端框架
Claude Code完全支持代码生成
Cline完全支持React 组件生成
aider部分支持CSS 上下文有限

Related Skills

相关 Skills

  • Composition Patterns
  • React Best Practices
  • Web Design Guidelines
  • Edge Rendering
  • Composition Patterns
  • React Best Practices
  • Web Design Guidelines
  • Edge Rendering

Keywords

关键词

view-transitions
react
shared-elements
page-transitions
animation
next-js
css-pseudo-elements
cross-fade
route-animation
© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License
view-transitions
react
shared-elements
page-transitions
animation
next-js
css-pseudo-elements
cross-fade
route-animation
© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License