视图过渡新纪元！

我们钟爱多页面应用(MPA)的简洁性，但每次全量加载时的白屏闪烁总让人头疼。视图过渡(View Transition)API通过截取旧页面快照、加载新页面后混合渲染，实现了丝滑导航体验——无需任何重型框架。

一行代码的升级方案

@view-transition {
   navigation: auto;
}

将此规则添加到项目每个页面后，从Chrome 126+、Edge 126+和Safari 18.2+开始，所有内部导航将自动获得渐隐过渡效果。

单页应用中的过渡控制

toggle.addEventListener('click', () =>
  document.startViewTransition(() => article.classList.toggle('open'))
)

当回调执行完毕时，浏览器会叠加旧页面快照并执行渐隐动画。

元素级过渡动画（view-transition-name属性）

img {
  view-transition-name: hero;
}

在跨页面中对相同元素使用统一命名后，浏览器将自动补间其位置、尺寸和透明度变化。

用伪元素定制动画曲线

::view-transition-old { animation: fade-out .3s ease-out; }
::view-transition-new { animation: fade-in  .3s ease-out;  }

@keyframes fade-in  { from {opacity:0} to {opacity:1} }
@keyframes fade-out { from {opacity:1} to {opacity:0} }

通过覆盖默认渐隐效果，可打造品牌专属动效风格。

渐进增强策略

if (matchMedia('(prefers-reduced-motion: reduce)').matches)
  document.startViewTransition?.(() => {})?.skipTransition()

也可通过CSS.supports('view-transition-name: x')做特性检测。不支持的浏览器会降级为普通页面加载。

性能优化贴士

• 保持页面轻量化
• 在回调函数中批量处理DOM变更，确保浏览器仅重排一次
• 避免在::view-transition-*伪元素上使用大型filter或box-shadow效果，这些会严重影响GPU填充率