View Transitions API란?

View Transitions란?

SPA 페이지 전환 시 부드러운 애니메이션을 넣으려면 복잡한 라이브러리가 필요했다. 이제 브라우저 네이티브 API로 해결한다.

사용

document.startViewTransition(() => {
  // DOM 업데이트
});
/* CSS */
::view-transition-old(root) { animation: fade-out 0.3s; }
::view-transition-new(root) { animation: fade-in 0.3s; }

Cross-Document

Chrome 126+부터 MPA(여러 페이지) 간에도 작동. 전통적 서버 렌더링 앱에도 네이티브 전환 가능.

지원

Chrome, Edge, Safari 18+. Next.js·Astro에 자동 적용 옵션.