view-transitions

视图过渡

属于 Agent Skills™，由 googleadsagent.ai™ 提供

描述

View Transitions 使用 React View Transition API，实现 UI 状态和路由之间流畅的动画过渡。此技能涵盖 <ViewTransition> 组件、用于对过渡进行分类的 addTransitionType、用于控制动画的 CSS 伪元素、跨路由的共享元素过渡，以及与 Next.js App Router 的集成。

视图过渡消除了页面间突兀的跳转，避免让 Web 应用显得不如原生应用。浏览器通过捕获离场状态的快照，并将其与进入状态交叉淡化，营造流畅的视觉连贯性，在导航时保留用户上下文。React 的实现与并发渲染模型集成，使过渡能够被中断并按优先级处理。

共享元素过渡更进一步：列表页面上的缩略图会变形为详情页面上的全尺寸主视觉图片，在路由变化时保持视觉一致性。CSS 属性 view-transition-name 用于建立元素之间的关联，浏览器会自动处理插值。

适用场景

• 在 React 或 Next.js 应用中切换路由
• 使用共享元素制作列表到详情页面的过渡动画
• 为页面内容添加进入/退出动画
• 实现带方向性动画的前进/后退导航
• 用户要求实现流畅的页面过渡或“原生应用般”的体验
• 替代手动实现的 FLIP 动画

工作原理

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 伪元素则控制视觉动画。

实现

基本路由过渡

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

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

共享元素过渡

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>
  );
}

带方向性的导航动画

import { addTransitionType } from "react";

function handleNavigation(direction: "forward" | "back") {
  addTransitionType(direction);
  router.push(targetUrl);
}

::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;
}

最佳实践

• 为 view-transition-name 赋予唯一值；重复值会导致静默失败
• 将过渡时长控制在 300ms 以内，以保持响应迅速，避免迟滞
• 遵循 prefers-reduced-motion 设置，禁用或缩短动画
• 使用 addTransitionType 区分前进、后退和横向导航
• 开启慢速网络和 CPU 限速，测试过渡效果
• 为不支持 View Transition API 的浏览器提供回退行为

平台兼容性

平台	支持情况	备注
Cursor	完全支持	支持 React 和 Next.js
VS Code	完全支持	支持 CSS 伪元素
Windsurf	完全支持	支持前端框架
Claude Code	完全支持	代码生成
Cline	完全支持	React 组件生成
aider	部分支持	CSS 上下文有限

相关技能

• 组合模式
• React 最佳实践
• Web 设计指南
• 边缘渲染

关键词

view-transitions react shared-elements page-transitions animation next-js css-pseudo-elements cross-fade route-animation

---

© 2026 googleadsagent.ai™ | Agent Skills™ | MIT License