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；在弱网下无闪烁与布局抖动