🎬
View Transitions API
페이지 전환 시 부드러운 애니메이션
페이지 전환 시 깜빡임 없이 부드러운 애니메이션을 구현하려면 복잡한 JavaScript와 CSS 조합이 필요했습니다. View Transitions API는 document.startViewTransition()을 호출하거나, MPA에서는 @view-transition 규칙으로 브라우저가 자동으로 전환 애니메이션을 처리합니다.
view-transition-name으로 특정 요소를 추적하면, 페이지 간 이동 시 해당 요소가 부드럽게 위치와 크기를 변경하는 공유 요소 전환도 구현할 수 있습니다.
적용 방법
1
SPA에서는 document.startViewTransition(() => updateDOM())을 호출한다
2
MPA에서는 meta 태그로 @view-transition을 활성화한다
3
공유 요소에 view-transition-name을 부여한다
4
::view-transition 의사 요소로 전환 애니메이션을 커스터마이즈한다
장점
- ✓ 기존 앱에 최소한의 코드로 페이지 전환 효과를 추가할 수 있다
- ✓ SPA와 MPA 모두 지원하여 어떤 아키텍처에서든 사용 가능하다
단점
- ✗ Safari의 지원이 아직 완전하지 않다
- ✗ 복잡한 공유 요소 전환은 레이아웃 계산 비용이 높을 수 있다
사용 사례
e-커머스 상품 목록에서 상세 페이지로의 부드러운 전환
다크 모드 / 라이트 모드 전환 시 부드러운 색상 변환