CSS View Transitions 跨路由过渡与图片列表到详情实践 startViewTransition-@view-transition

概览View Transitions 允许以系统支持的方式在页面视图状态切换时生成快照并过渡。结合 `document.startViewTransition` 与 `@view-transition` 选择器，可构建列表到详情的大图过渡，提高用户感知品质。基础行为// app/client-transition.ts

'use client'

import { useRouter } from 'next/navigation'

export function useTransitionNav() {

const router = useRouter()

return (to: string) => {

if ((document as any).startViewTransition) {

(document as any).startViewTransition(() => router.push(to))

} else {

router.push(to)

}

}

}

列表到详情元素命名// 列表页卡片

<img src="/images/p1.jpg" style={{ viewTransitionName: 'hero-p1' }} />

// 详情页大图

<img src="/images/p1.jpg" style={{ viewTransitionName: 'hero-p1' }} />

样式治理@view-transition { /* 全局策略 */ }

::view-transition-group(hero-p1) { animation-duration: 300ms; }

::view-transition-old(hero-p1),

::view-transition-new(hero-p1) {

transform-origin: center center;

}

@media (prefers-reduced-motion: reduce) {

::view-transition-group(hero-p1) { animation-duration: 0ms; }

}

验证与指标浏览器：Chrome 120+、Edge 120+（Safari/Firefox 逐步跟进，未支持时退化为普通导航）Next.js：15.0+；Node.js：20.x导航体验：过渡时长 300ms；在弱网下无闪烁与布局抖动