방향 탐색 전환

웹 기능: 뷰 전환 활성 뷰 전환

단일 페이지 애플리케이션 (SPA)은 새 페이지로 이동하지 않고 페이지의 콘텐츠를 대체하여 탐색 모양을 제공합니다. 기본적으로 콘텐츠는 전환 없이 단순히 대체됩니다. 방향 전환은 뷰 간의 공간적 관계를 시각적으로 강화할 수 있습니다.

사용자가 이동하는 방향에서 새 콘텐츠를 슬라이드하면 애플리케이션 구조의 정신적 지도가 생성됩니다. 예를 들어 제품 사이트에서는 '앞으로'의 경우 오른쪽으로, '뒤로'의 경우 왼쪽으로 전환을 표시할 수 있으며, 슬라이드쇼에서는 위아래로 전환하여 다음 슬라이드와 이전 슬라이드를 표시할 수 있습니다.

구현 단계

  1. 탐색 방향 감지: 사용자가 애플리케이션 흐름에서 '앞으로' 이동하는지 '뒤로' 이동하는지 확인합니다. 방향을 감지하는 방법은 사용 사례에 따라 다릅니다.
  2. 유형으로 전환 트리거: types 배열의 방향을 document.startViewTransition()에 전달하여 전환을 분류합니다.
  3. CSS로 방향 애니메이션 정의: :active-view-transition-type() 가상 클래스를 사용하여 탐색 유형에 따라 특정 애니메이션을 적용합니다.

키프레임 정의

각 방향으로의 슬라이딩 애니메이션을 정의합니다. 최상의 성능을 위해 transform 속성 또는 개별 변환 속성(scale, rotate, translate)을 사용하여 위치 변경을 애니메이션 처리합니다. opacity도 일반적으로 성능이 우수하지만, 레이아웃이나 페인트를 트리거하지 않는지 먼저 확인하지 않고 다른 CSS 속성에 애니메이션을 적용하지 마세요.

/* Slide an element out to the left */
@keyframes slide-to-left {
  /* Mandatory: animate `transform` instead of inset properties for better performance. */
  to { transform: translateX(-100%); }
}

/* Slide an element in from the right */
@keyframes slide-from-right {
  from { transform: translateX(100%); }
}

/* Slide an element out to the right */
@keyframes slide-to-right {
  to { transform: translateX(100%); }
}

/* Slide an element in from the left */
@keyframes slide-from-left {
  from { transform: translateX(-100%); }
}

공유 애니메이션 설정 구성

::view-transition-group(root) 선택기를 사용하여 모든 전환에 공유되는 애니메이션 설정을 적용합니다.

::view-transition-group(root){
  animation: 0.4s ease-in-out both;
}

방향 애니메이션 적용

active-view-transition-type 가상 클래스를 사용하여 '앞으로' 또는 '뒤로' 유형이 활성 상태일 때 전환 뷰를 구체적으로 타겟팅합니다.

/* MANDATORY: Apply forward animations when the 'forward' type is active */
html:active-view-transition-type(forward)::view-transition-old(root) {
  animation-name: slide-to-left;
}
html:active-view-transition-type(forward)::view-transition-new(root) {
  animation-name: slide-from-right;
}

/* MANDATORY: Apply backward animations when the 'backward' type is active */
html:active-view-transition-type(backward)::view-transition-old(root) {
  animation-name: slide-to-right;
}
html:active-view-transition-type(backward)::view-transition-new(root) {
  animation-name: slide-from-left;
}

전환 트리거

탐색할 때 적절한 유형을 startViewTransition 메서드에 전달합니다.

const transitionType = yourTransitionTypeLogic();
const updateDOM = yourUpdateDOMLogic();

document.startViewTransition({
  update: updateDOM,
  types: [transitionType] // Matches the CSS :active-view-transition-type() selectors
});

접근성

애니메이션을 사용 중지하거나 단순화하여 모션 감소에 관한 사용자 환경설정을 항상 존중합니다.

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(root) {
    animation: none !important;
  }
}

대체 전략

View Transitions API는 점진적 개선입니다. 지원되지 않는 브라우저에서 document.startViewTransition는 undefined입니다. 이 도우미 함수에 표시된 것처럼 애니메이션 없이 DOM 업데이트가 즉시 발생하도록 하려면 탐색 로직을 기능 감지 검사로 래핑해야 합니다.

/**
 * Navigates to a new view with a directional transition.
 * @param {Function} updateDOM - Callback to update the DOM state.
 * @param {string} direction - Either 'forward' or 'backward'.
 */
function navigate(updateDOM, direction) {
  // Feature detect for browsers that do not support View Transitions
  if (!document.startViewTransition) {
    updateDOM();
    return;
  }

  // Start transition with the specific navigation type
  document.startViewTransition({
    update: updateDOM,
    types: [direction] // Matches the CSS :active-view-transition-type() selectors
  });
}