문서 간 전환

웹 기능: 뷰 전환 교차 문서 뷰 전환 Navigation API

교차 문서 뷰 전환을 사용하면 다중 페이지 애플리케이션 (MPA)의 여러 페이지 간에 앱과 같은 부드러운 전환을 만들 수 있습니다. 기본적으로 브라우저는 크로스페이드를 실행하지만 사이트의 미적 감각에 맞게 맞춤설정할 수 있습니다.

구현 단계

1. 교차 문서 뷰 전환 선택

브라우저가 탐색 시 전환을 트리거하려면 소스 페이지와 도착 페이지 모두 전환 보기를 선택해야 합니다.

/* Respect user's preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  /* Add to a global stylesheet shared by both pages */
  @view-transition {
    /* Enables transitions for same-origin navigations */
    navigation: auto;
  }
}

2. 전환 애니메이션 맞춤설정 (선택사항)

의사 요소를 사용하여 전환의 이전 상태와 새 상태를 타겟팅하여 슬라이드나 표시와 같은 효과를 만들 수 있습니다.

/* Customizing the outgoing page animation */
::view-transition-old(root) {
  /* Move the old page out to the left */
  animation: 0.4s ease-in both slide-out;
}

/* Customizing the incoming page animation */
::view-transition-new(root) {
  /* Move the new page in from the right */
  animation: 0.4s ease-out both slide-in;
}

@keyframes slide-out {
  to { transform: translateX(-20%); opacity: 0; }
}

@keyframes slide-in {
  from { transform: translateX(100%); }
}

3. 방향 전환 만들기 (선택사항)

탐색하는 페이지에 따라 다른 전환 효과를 원할 수 있습니다. 예를 들어 홈페이지에서 연락처 페이지로 이동할 때 새 콘텐츠가 오른쪽에서 나타나는 효과를 원할 수 있습니다. 홈페이지로 다시 이동할 때는 동일한 효과를 적용하는 것이 적절하지 않습니다.

페이지로 이동하는 방식과 관계없이 이동하는 페이지의 전환 유형이 항상 동일한 경우 @view-transition 규칙에서 types를 사용하여 지정할 수 있습니다.

@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
    /* Specify the types of view transitions that will always be used on this page. */
    types: previous;
  }
}

pagereveal의 이벤트 리스너 내에서 전환 유형을 조건부로 지정할 수도 있습니다.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition && window.navigation?.activation) {
    // Use application-specific logic to compute a transition type
     const transitionType = yourTransitionTypeLogic(navigation.activation.from, navigation.activation.entry);
    e.viewTransition.types.add(transitionType);
  }
});

그런 다음 :active-view-transition-type() 의사 선택기를 사용하여 각 유형에 서로 다른 애니메이션을 적용합니다.

:active-view-transition-type(next) {
  &::view-transition-old(root) {
    animation-name: slide-out-next;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-next;
  }
}
:active-view-transition-type(previous) {
  &::view-transition-old(root) {
    animation-name: slide-out-previous;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-previous;
  }
}

대체 전략

브라우저가 뷰 전환 또는 교차 문서 뷰 전환을 지원하지 않는 경우 표준 즉시 페이지 탐색을 실행합니다. 교차 문서 뷰 전환은 점진적 개선입니다. 사이트의 핵심 기능은 영향을 받지 않습니다.

JavaScript에서 지원 여부를 확인하려면 다음 안내를 따르세요.

if ('onpagereveal' in window) {
  // Browser supports cross-document view transitions
}

브라우저가 Navigation API를 지원하지 않으면 이를 사용하여 전환 유형을 확인할 수 없습니다. 전환 유형을 결정하는 대체 방법을 사용하거나 대체 전환 유형을 제공합니다. 그렇지 않으면 브라우저가 표준 인스턴트 페이지 탐색을 실행합니다.

JavaScript에서 지원 여부를 확인하려면 다음 안내를 따르세요.

if (window.navigation?.activation) {
  // Browser supports the Navigation API
}