View Transitions API — 페이지 전환 애니메이션

SPA View Transitions

// 상태 변경을 트랜지션으로 감싸기
document.startViewTransition(() => {
  updateDOM();  // DOM 업데이트
});

// CSS
::view-transition-old(root) {
  animation: fade-out 0.3s;
}
::view-transition-new(root) {
  animation: fade-in 0.3s;
}

MPA (Next.js)

// next.config.ts
export default {
  experimental: { viewTransition: true },
};

// 요소에 이름 지정
<img style={{ viewTransitionName: `hero-${id}` }} />

같은 이름의 요소가 페이지 간에 부드럽게 전환됩니다.