View Transition API를 사용하면 웹사이트에서 다양한 뷰 간에 시각적인 매끄러운 전환을 만들 수 있습니다. 이렇게 하면 사이트가 멀티 페이지 애플리케이션 (MPA)으로 빌드되었는지 아니면 단일 페이지 애플리케이션 (SPA)으로 빌드되었는지에 관계없이 사용자가 사이트를 탐색할 때 더 시각적으로 매력적인 사용자 환경을 제공할 수 있습니다.
뷰 전환을 사용하는 일반적인 상황은 다음과 같습니다.
- 제품 세부정보 페이지에서 원본 크기 제품 이미지로 전환되는 제품 등록정보 페이지의 썸네일 이미지입니다.
- 한 페이지에서 다른 페이지로 이동할 때 그대로 유지되는 고정된 탐색 메뉴입니다.
- 필터링함에 따라 항목이 이동하는 그리드
뷰 전환 구현
뷰 전환은 특정 애플리케이션 아키텍처나 프레임워크에 묶여 있지 않으며, 단일 문서뿐만 아니라 서로 다른 두 문서 사이에서도 트리거될 수 있습니다.
두 가지 유형의 뷰 전환은 모두 매우 동일한 빌딩 블록과 원칙을 사용합니다.
- 브라우저가 이전 상태와 새 상태의 스냅샷을 찍습니다.
- 렌더링이 억제되는 동안 DOM이 업데이트됩니다.
- 전환은 CSS 애니메이션으로 구동됩니다.
두 유형의 한 가지 다른 점은 트리거하는 방법입니다.
동일 문서 뷰 전환
단일 문서에서 뷰 전환이 실행되는 경우 이를 동일 문서 뷰 전환이라고 합니다. 일반적으로 단일 페이지 애플리케이션 (SPA)에서 이러한 상황이 발생합니다. 동일 문서 뷰 전환은 Chrome 111부터 Chrome에서 지원됩니다.
트리거 방법
document.startViewTransition를 호출하여 동일 문서 뷰 전환을 트리거합니다.
function handleClick(e) {
// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
updateTheDOMSomehow();
return;
}
// With a View Transition:
document.startViewTransition(() => updateTheDOMSomehow());
}
예
다음 카드의 예는 동일한 문서 뷰 전환을 사용하여 새 카드가 추가되거나 삭제될 때 카드에 애니메이션을 적용하는 SPA입니다.
<ph type="x-smartling-placeholder">빌드 시작
동일 문서 뷰 전환에 관한 자세한 내용은 전용 문서 페이지를 참조하세요.
문서 간 뷰 전환
두 개의 다른 문서 간에 보기 전환이 발생하는 경우 이를 문서 간 보기 전환이라고 합니다. 이는 MPA에서 일반적입니다. 문서 간 뷰 전환은 Chrome 126 이상에서 지원됩니다.
트리거 방법
두 페이지가 모두 선택된 경우 동일 출처 교차 문서 탐색에 의해 문서 간 뷰 전환이 트리거됩니다. 즉, 문서 간 뷰 전환을 시작하기 위해 호출하는 API가 없습니다. 사용자가 링크를 클릭하면 해당 클릭으로 보기 전환이 트리거됩니다.
상위 수신 동의인 경우 다음 CSS 스니펫을 사용하세요.
@view-transition {
navigation: auto;
}
예
다음 Stack Navigator 예는 서로 다른 두 문서 간의 문서 간 뷰 전환을 사용하는 MPA입니다. 탐색을 더 깊이 파고 있는지 여부에 따라 페이지가 스택으로 푸시되거나 팝아웃됩니다.
<ph type="x-smartling-placeholder">빌드 시작
문서 간 뷰 전환에 대해 알아야 할 모든 사항에 대해 알아보세요.