View Transition API를 사용한 원활한 전환

Bramus

View Transition API를 사용하면 웹사이트의 여러 뷰 간에 원활한 시각적 전환을 만들 수 있습니다. 다중 페이지 애플리케이션 (MPA)으로 빌드되었는지 단일 페이지 애플리케이션 (SPA)으로 빌드되었는지에 관계없이 사용자가 사이트를 탐색할 때 시각적으로 더 매력적인 사용자 환경을 제공합니다.

뷰 전환을 사용하는 일반적인 상황은 다음과 같습니다.

• 제품 세부정보 페이지에서 전체 크기 제품 이미지로 전환되는 제품 등록정보 페이지의 썸네일 이미지입니다.
• 한 페이지에서 다른 페이지로 이동할 때 탐색 메뉴가 그대로 유지된 고정 탐색 메뉴
• 필터링하면서 항목이 위치가 이동하는 그리드

뷰 전환 구현

뷰 전환은 특정 애플리케이션 아키텍처나 프레임워크에 구속되지 않으며, 단일 문서에서 뿐만 아니라 두 개의 다른 문서 간에도 트리거될 수 있습니다.

두 가지 유형의 뷰 전환은 모두 동일한 빌딩 블록과 원칙을 사용합니다.

1. 브라우저는 이전 상태와 새 상태의 스냅샷을 촬영합니다.
2. 렌더링이 억제되는 동안 DOM이 업데이트됩니다.
3. 전환은 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입니다.

빌드 시작

전용 문서 페이지를 참고하여 동일 문서 보기 전환에 관해 알아야 할 모든 사항을 알아보세요.

동일한 문서 뷰 전환 빌드하기

문서 간 뷰 전환

서로 다른 두 문서 간에 보기 전환이 발생하는 경우 이를 문서 간 보기 전환이라고 합니다. 이는 MPA에서 일반적으로 발생하는 현상입니다. 문서 간 보기 전환은 Chrome 126 이상에서 지원됩니다.

트리거 방법

두 페이지를 모두 선택한 경우 동일한 출처의 문서 간 탐색에 의해 문서 간 보기 전환이 트리거됩니다. 즉, 문서 간 보기 전환을 시작하기 위해 호출할 API가 없습니다. 사용자가 링크를 클릭하면 해당 클릭으로 보기 전환이 실행됩니다.

상위 옵트인에는 다음 CSS 스니펫을 사용합니다.

@view-transition {
  navigation: auto;
}

예

다음 Stack Navigator 예시는 두 개의 다른 문서 간에 문서 간 뷰 전환을 사용하는 MPA입니다. 탐색의 더 깊은 지점인지 여부에 따라 페이지가 스택으로 푸시되거나 팝오프됩니다.

빌드 시작

문서 간 보기 전환에 대해 알아야 할 모든 사항을 알아봅니다.

문서 간 뷰 전환 빌드하기