View Transitions API 实战

View Transitions API 让页面之间的过渡动画变得简单，而且能在多页应用中实现 SPA 般的流畅体验。

基础用法

// 页面切换时触发过渡动画
document.startViewTransition(() => {
  updateDOM();
});

多页面应用

MPA 中可以使用 Cross-document View Transitions：

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fade-out 0.3s ease; }
::view-transition-new(root) { animation: fade-in 0.3s ease; }

View Transitions API 让多页应用也能拥有流畅的页面过渡，是 2026 年值得掌握的新技术。