단일 페이지 애플리케이션의 동일 문서 보기 전환

Jake Archibald
Jake Archibald
X 홈페이지
Bramus

단일 문서에서 뷰 전환이 실행되는 경우 이를 동일 문서 뷰 전환이라고 합니다. 일반적으로 JavaScript를 사용하여 DOM을 업데이트하는 단일 페이지 애플리케이션 (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());
}

호출하면 브라우저가 view-transition-name CSS 속성이 선언된 모든 요소의 스냅샷을 자동으로 캡처합니다.

그런 다음 DOM을 업데이트하는 전달된 콜백을 실행한 다음 새 상태의 스냅샷을 찍습니다.

그런 다음 이러한 스냅샷은 의사 요소 트리에 정렬되며 CSS 애니메이션의 기능을 사용하여 애니메이션 처리됩니다. 이전 상태와 새 상태의 스냅샷 쌍이 이전 위치와 크기에서 새 위치로 매끄럽게 전환되는 동안 콘텐츠가 크로스페이드됩니다. 원하는 경우 CSS를 사용하여 애니메이션을 맞춤설정할 수 있습니다.

기본 전환: 크로스 페이드

기본 보기 전환은 크로스 페이드이므로 API를 소개하는 역할을 합니다.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

여기서 updateTheDOMSomehow는 DOM을 새 상태로 변경합니다. 원하는 대로 수행할 수 있습니다. 예를 들어 요소를 추가 또는 삭제하거나, 클래스 이름을 변경하거나, 스타일을 변경할 수 있습니다.

이렇게 페이지가 크로스 페이드됩니다.

기본 크로스 페이드입니다. 최소 데모 출처.

크로스 페이드는 그렇게 인상적이지 않습니다. 다행히 전환은 맞춤설정할 수 있지만 먼저 이 기본 크로스 페이드가 어떻게 작동하는지 이해해야 합니다.

전환 작동 방식

이전 코드 샘플을 업데이트해 보겠습니다.

document.startViewTransition(() => updateTheDOMSomehow(data));

.startViewTransition()가 호출되면 API가 페이지의 현재 상태를 캡처합니다. 여기에는 스냅샷 생성이 포함됩니다.

완료되면 .startViewTransition()에 전달된 콜백이 호출됩니다. 여기에서 DOM이 변경됩니다. 그런 다음 API가 페이지의 새로운 상태를 캡처합니다.

새 상태가 캡처되면 API는 다음과 같이 의사 요소 트리를 생성합니다.

::view-transition
└─ ::view-transition-group(root)
   └─ ::view-transition-image-pair(root)
      ├─ ::view-transition-old(root)
      └─ ::view-transition-new(root)

::view-transition는 페이지의 다른 모든 항목 위에 오버레이로 표시됩니다. 전환의 배경 색상을 설정하려는 경우 유용합니다.

::view-transition-old(root)는 이전 뷰의 스크린샷이고 ::view-transition-new(root)는 새 뷰의 실시간 표현입니다. 둘 다 CSS '대체 콘텐츠' (예: <img>)로 렌더링됩니다.

기존 뷰는 opacity: 1에서 opacity: 0로 애니메이션되고 새 뷰는 opacity: 0에서 opacity: 1로 애니메이션 처리되어 크로스 페이드가 생성됩니다.

모든 애니메이션은 CSS 애니메이션을 사용하여 실행되므로 CSS로 맞춤설정할 수 있습니다.

전환 맞춤설정

모든 뷰 전환 의사 요소는 CSS로 타겟팅할 수 있으며, 애니메이션은 CSS를 사용하여 정의되므로 기존 CSS 애니메이션 속성을 사용하여 수정할 수 있습니다. 예를 들면 다음과 같습니다.

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 5s;
}

이 한 가지 변경으로 페이드가 매우 느려집니다.

긴 크로스 페이드. 최소 데모 출처.

뭐, 그래도 인상적이군. 대신 다음 코드는 Material Design의 공유 축 전환을 구현합니다.

@keyframes fade-in {
  from { opacity: 0; }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes slide-from-right {
  from { transform: translateX(30px); }
}

@keyframes slide-to-left {
  to { transform: translateX(-30px); }
}

::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

결과는 다음과 같습니다.

공유 축 전환. 최소 데모 출처.

여러 요소 전환

이전 데모에서는 전체 페이지가 공유 축 전환에 관여합니다. 이 방법은 대부분의 페이지에서 작동하지만, 다시 밀어 넣기 위해 슬라이드아웃되므로 제목에는 적합하지 않을 수 있습니다.

이 문제를 피하려면 페이지의 나머지 부분에서 헤더를 추출하여 별도로 애니메이션이 적용되도록 할 수 있습니다. 요소에 view-transition-name를 할당하면 됩니다.

.main-header {
  view-transition-name: main-header;
}

view-transition-name의 값은 원하는 대로 지정할 수 있습니다 (전환 이름이 없음을 의미하는 none는 예외). 전환 전체에서 요소를 고유하게 식별하는 데 사용됩니다.

그 결과:

고정 헤더가 있는 공유 축 전환. 최소 데모 출처.

이제 헤더가 고정되고 크로스 페이드됩니다.

해당 CSS 선언으로 인해 pseudo-element 트리가 변경되었습니다.

::view-transition
├─ ::view-transition-group(root)
│  └─ ::view-transition-image-pair(root)
│     ├─ ::view-transition-old(root)
│     └─ ::view-transition-new(root)
└─ ::view-transition-group(main-header)
   └─ ::view-transition-image-pair(main-header)
      ├─ ::view-transition-old(main-header)
      └─ ::view-transition-new(main-header)

이제 두 개의 전환 그룹이 있습니다. 하나는 헤더용, 다른 하나는 나머지용입니다. 이러한 요소는 CSS를 사용하여 독립적으로 타겟팅할 수 있으며 다른 전환을 사용할 수 있습니다. 하지만 이 경우에는 main-header에 기본 전환인 크로스 페이드가 그대로 남아 있습니다.

기본 전환은 크로스 페이드만이 아니라 ::view-transition-group도 전환됩니다.

  • 위치 및 변환 (transform 사용)
  • 너비
  • 키

헤더는 DOM이 변경되는 양쪽의 크기와 위치가 동일하기 때문에 지금까지는 문제가 되지 않았습니다. 헤더에서 텍스트를 추출할 수도 있습니다.

.main-header-text {
  view-transition-name: main-header-text;
  width: fit-content;
}

요소가 나머지 너비로 늘어나지 않고 텍스트 크기가 되도록 fit-content가 사용됩니다. 이 속성이 없으면 뒤로 화살표를 사용하면 헤더 텍스트 요소의 크기가 두 페이지에서 같은 크기로 줄어듭니다.

이제 세 가지 부분을 다루겠습니다.

::view-transition
├─ ::view-transition-group(root)
│  └─ …
├─ ::view-transition-group(main-header)
│  └─ …
└─ ::view-transition-group(main-header-text)
   └─ …

하지만 다시 기본값을 사용합니다.

헤더 텍스트를 슬라이딩합니다. 최소 데모 출처.

이제 제목 텍스트가 약간 만족스러운 슬라이드를 만들어 뒤로 버튼을 위한 공간을 만듭니다.

view-transition-class를 사용하여 동일한 방식으로 여러 유사 요소에 애니메이션 적용

브라우저 지원

  • 125
  • 125
  • x
  • x

여러 장의 카드가 있고 페이지에 제목도 있는 뷰 전환이 있다고 가정해 보겠습니다. 제목을 제외한 모든 카드에 애니메이션을 적용하려면 각각의 모든 개별 카드를 타겟팅하는 선택기를 작성해야 합니다.

h1 {
    view-transition-name: title;
}
::view-transition-group(title) {
    animation-timing-function: ease-in-out;
}

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
…
#card20 { view-transition-name: card20; }

::view-transition-group(card1),
::view-transition-group(card2),
::view-transition-group(card3),
::view-transition-group(card4),
…
::view-transition-group(card20) {
    animation-timing-function: var(--bounce);
}

원소가 20개나 됐어? 20개의 선택기를 작성해야 합니다. 새 요소를 추가하시나요? 그런 다음 애니메이션 스타일을 적용하는 선택기도 늘려야 합니다. 정확히 확장 가능하지 않습니다.

뷰 전환 의사 요소에서 view-transition-class를 사용하여 동일한 스타일 규칙을 적용할 수 있습니다.

#card1 { view-transition-name: card1; }
#card2 { view-transition-name: card2; }
#card3 { view-transition-name: card3; }
#card4 { view-transition-name: card4; }
#card5 { view-transition-name: card5; }
…
#card20 { view-transition-name: card20; }

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

다음 카드의 예는 이전 CSS 스니펫을 활용합니다. 새로 추가된 카드를 포함한 모든 카드에 하나의 선택기(html::view-transition-group(.card))로 동일한 타이밍이 적용됩니다.

카드 데모 녹화본 view-transition-class를 사용하면 추가되거나 삭제된 카드를 제외한 모든 카드에 동일한 animation-timing-function가 적용됩니다.

디버그 전환

뷰 전환은 CSS 애니메이션을 기반으로 빌드되므로 Chrome DevTools의 Animations 패널은 전환을 디버깅하는 데 매우 유용합니다.

Animations 패널을 사용하면 다음 애니메이션을 일시중지한 다음 애니메이션을 앞뒤로 스크러빙할 수 있습니다. 이 과정에서 전환 의사 요소는 Elements 패널에서 확인할 수 있습니다.

Chrome DevTools로 뷰 전환을 디버깅합니다.

전환 요소가 동일한 DOM 요소일 필요는 없습니다.

지금까지는 view-transition-name를 사용하여 헤더와 헤더의 텍스트를 위한 별도의 전환 요소를 만들었습니다. 이 요소는 DOM 변경 전과 후의 개념적으로 동일한 요소이지만 그렇지 않은 전환을 만들 수 있습니다.

예를 들어 기본 동영상 삽입에 view-transition-name를 지정할 수 있습니다.

.full-embed {
  view-transition-name: full-embed;
}

그런 다음 썸네일을 클릭하면 전환 시간 동안만 동일한 view-transition-name가 부여될 수 있습니다.

thumbnail.onclick = async () => {
  thumbnail.style.viewTransitionName = 'full-embed';

  document.startViewTransition(() => {
    thumbnail.style.viewTransitionName = '';
    updateTheDOMSomehow();
  });
};

결과는 다음과 같습니다.

한 요소가 다른 요소로 전환됩니다. 최소 데모 출처.

썸네일이 기본 이미지로 전환됩니다. 개념적으로 그리고 문자 그대로 다른 요소이지만 전환 API는 동일한 view-transition-name를 공유하므로 동일한 요소로 취급합니다.

이 전환의 실제 코드는 이전 예보다 조금 더 복잡합니다. 썸네일 페이지로 다시 전환하는 작업도 처리하기 때문입니다. 전체 구현은 소스를 참조하세요.

맞춤 들어가기 및 나가기 전환

다음 예를 살펴보세요.

사이드바에 들어가고 나갑니다. 최소 데모 출처.

사이드바는 전환의 일부입니다.

.sidebar {
  view-transition-name: sidebar;
}

그러나 앞선 예의 헤더와 달리 사이드바는 일부 페이지에만 표시됩니다. 두 상태에 모두 사이드바가 있는 경우 전환 의사 요소는 다음과 같습니다.

::view-transition
├─ …other transition groups…
└─ ::view-transition-group(sidebar)
   └─ ::view-transition-image-pair(sidebar)
      ├─ ::view-transition-old(sidebar)
      └─ ::view-transition-new(sidebar)

하지만 사이드바가 새 페이지에만 있는 경우 ::view-transition-old(sidebar) 의사 요소는 표시되지 않습니다. 사이드바의 '이전' 이미지가 없으므로 이미지 쌍에는 ::view-transition-new(sidebar)만 있습니다. 마찬가지로 사이드바가 이전 페이지에만 있는 경우 이미지 쌍에는 ::view-transition-old(sidebar)만 있습니다.

이전 데모에서 사이드바는 두 상태 모두에서 진입, 이탈 또는 표시 여부에 따라 다르게 전환됩니다. 오른쪽에서 슬라이드했다가 페이드인하여 들어오고, 오른쪽으로 슬라이드되었다가 페이드 아웃되면서 종료되고, 두 상태에 모두 존재할 때는 제자리에 머무릅니다.

특정 시작 및 종료 전환을 만들려면 :only-child 의사 클래스를 사용하여 이전 또는 새 유사 요소가 이미지 쌍의 유일한 하위 요소인 경우 이를 타겟팅하면 됩니다.

/* Entry transition */
::view-transition-new(sidebar):only-child {
  animation: 300ms cubic-bezier(0, 0, 0.2, 1) both fade-in,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Exit transition */
::view-transition-old(sidebar):only-child {
  animation: 150ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-right;
}

이 경우에는 기본값이 완벽하므로 사이드바가 두 상태에 모두 표시되는 경우에 대한 특별한 전환은 없습니다.

비동기 DOM 업데이트 및 콘텐츠 대기

.startViewTransition()에 전달된 콜백은 비동기 DOM 업데이트를 허용하고 중요한 콘텐츠가 준비되기를 기다리는 프로미스를 반환할 수 있습니다.

document.startViewTransition(async () => {
  await something;
  await updateTheDOMSomehow();
  await somethingElse;
});

프로미스가 처리될 때까지 전환이 시작되지 않습니다. 이 시간 동안 페이지가 정지되므로 여기에서 발생하는 지연을 최소화해야 합니다. 특히 네트워크 가져오기는 페이지가 .startViewTransition() 콜백의 일부로 실행되는 것이 아니라 완전히 대화형인 상태에서 .startViewTransition()를 호출하기 전에 이루어져야 합니다.

이미지나 글꼴이 준비될 때까지 기다리려면 제한 시간을 공격적으로 설정하세요.

const wait = ms => new Promise(r => setTimeout(r, ms));

document.startViewTransition(async () => {
  updateTheDOMSomehow();

  // Pause for up to 100ms for fonts to be ready:
  await Promise.race([document.fonts.ready, wait(100)]);
});

하지만 경우에 따라서는 지연을 완전히 피하고 이미 보유하고 있는 콘텐츠를 사용하는 것이 더 나을 수도 있습니다.

이미 보유한 콘텐츠를 최대한 활용하세요

썸네일이 더 큰 이미지로 전환되는 경우:

더 큰 이미지로 전환하는 썸네일입니다. 데모 사이트 사용해 보기

기본 전환은 크로스 페이드입니다. 즉, 미리보기 이미지가 아직 로드되지 않은 전체 이미지와 크로스 페이드될 수 있습니다.

이를 처리하는 한 가지 방법은 전환을 시작하기 전에 전체 이미지가 로드될 때까지 기다리는 것입니다. 이상적으로는 .startViewTransition()를 호출하기 전에 이 작업을 실행하여 페이지의 상호작용 상태를 유지하고 스피너를 표시하여 사용자에게 항목이 로드되고 있음을 나타낼 수 있습니다. 하지만 이 경우에는 더 좋은 방법이 있습니다.

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
}

이제 썸네일이 서서히 사라지지 않고 전체 이미지 아래에 위치하게 됩니다. 즉, 새 뷰가 로드되지 않은 경우 전환하는 동안 썸네일이 표시됩니다. 즉, 전환을 즉시 시작할 수 있으며 전체 이미지를 원하는 시간에 로드할 수 있습니다.

새 보기에서 투명도를 표시했다면 작동하지 않지만 이 경우에는 그렇지 않다는 것을 알고 있으므로 이 최적화를 적용할 수 있습니다.

가로세로 비율 변경 처리

편리하게도, 지금까지의 모든 전환은 동일한 가로세로 비율의 요소로 이루어졌지만 항상 그런 것은 아닙니다. 썸네일이 1:1이고 기본 이미지가 16:9이면 어떻게 되나요?

한 요소가 다른 요소로 전환되고 가로세로 비율이 변경됩니다. 최소 데모 출처.

기본 전환에서 그룹은 전 크기에서 이후 크기로 애니메이션됩니다. 이전 보기와 새 보기는 그룹의 너비가 100% 이고 자동 높이는 자동 높이입니다. 즉, 그룹의 크기와 관계없이 가로세로 비율이 유지됩니다.

좋은 기본값이지만 이 경우에는 적합하지 않습니다. 따라서

::view-transition-old(full-embed),
::view-transition-new(full-embed) {
  /* Prevent the default animation,
  so both views remain opacity:1 throughout the transition */
  animation: none;
  /* Use normal blending,
  so the new view sits on top and obscures the old view */
  mix-blend-mode: normal;
  /* Make the height the same as the group,
  meaning the view size might not match its aspect-ratio. */
  height: 100%;
  /* Clip any overflow of the view */
  overflow: clip;
}

/* The old view is the thumbnail */
::view-transition-old(full-embed) {
  /* Maintain the aspect ratio of the view,
  by shrinking it to fit within the bounds of the element */
  object-fit: contain;
}

/* The new view is the full image */
::view-transition-new(full-embed) {
  /* Maintain the aspect ratio of the view,
  by growing it to cover the bounds of the element */
  object-fit: cover;
}

즉, 너비가 커질수록 썸네일 이미지가 요소의 중앙에 유지되지만 1:1에서 16:9로 전환될 때는 전체 이미지가 '잘리지 않습니다'.

자세한 내용은 뷰 전환: 가로세로 비율 변경 처리를 참고하세요.

미디어 쿼리를 사용하여 다양한 기기 상태의 전환 변경

모바일과 데스크톱에서 서로 다른 전환을 사용할 수 있습니다. 예를 들어 모바일에서는 측면에 전체 슬라이드를 실행하고 데스크톱에서는 좀 더 섬세하게 슬라이드합니다.

한 요소가 다른 요소로 전환됩니다. 최소 데모 출처.

이렇게 하려면 일반 미디어 쿼리를 사용하면 됩니다.

/* Transitions for mobile */
::view-transition-old(root) {
  animation: 300ms ease-out both full-slide-to-left;
}

::view-transition-new(root) {
  animation: 300ms ease-out both full-slide-from-right;
}

@media (min-width: 500px) {
  /* Overrides for larger displays.
  This is the shared axis transition from earlier in the article. */
  ::view-transition-old(root) {
    animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(root) {
    animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
      300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }
}

일치하는 미디어 쿼리에 따라 view-transition-name를 할당하는 요소를 변경하는 것이 좋습니다.

'모션 감소' 환경설정에 반응

사용자는 운영체제를 통해 모션 감소를 선호하고 이러한 환경설정이 CSS에 노출되도록 표시할 수 있습니다.

이러한 사용자의 전환이 발생하지 않도록 다음과 같이 선택할 수 있습니다.

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

그러나 '모션 감소'를 선호한다고 해서 사용자가 모션이 없음을 원하는 것은 아닙니다. 앞의 스니펫 대신 요소 간의 관계와 데이터 흐름을 계속 표현하는 좀 더 섬세한 애니메이션을 선택할 수 있습니다.

뷰 전환 유형으로 여러 뷰 전환 스타일 처리

때로는 특정 보기에서 다른 보기로 전환할 때 특별한 맞춤 전환이 필요합니다. 예를 들어 페이지로 나누기 순서에서 다음 또는 이전 페이지로 이동할 때 시퀀스에서 상위 페이지로 이동하는지 또는 하위 페이지로 이동하는지에 따라 콘텐츠를 다른 방향으로 슬라이드할 수 있습니다.

페이지로 나누기 데모 녹화 이동하려는 페이지에 따라 다른 전환을 사용합니다.

이를 위해 뷰 전환 유형을 사용할 수 있으며, 이 유형을 통해 Active View 전환에 하나 이상의 유형을 할당할 수 있습니다. 예를 들어 페이지로 나누기 시퀀스에서 상위 페이지로 전환할 때는 forwards 유형을 사용하고, 하위 페이지로 이동할 때는 backwards 유형을 사용합니다. 이러한 유형은 전환을 캡처하거나 실행할 때만 활성화되며 CSS를 통해 각 유형을 맞춤설정하여 다양한 애니메이션을 사용할 수 있습니다.

동일한 문서 뷰 전환에서 유형을 사용하려면 startViewTransition 메서드에 types를 전달합니다. 이를 위해 document.startViewTransition는 객체도 허용합니다. update는 DOM을 업데이트하는 콜백 함수이고 types는 유형이 있는 배열입니다.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
});

이러한 유형에 응답하려면 :active-view-transition-type() 선택기를 사용하세요. 타겟팅하려는 type를 선택기에 전달합니다. 이를 통해 하나의 선언이 다른 뷰의 선언을 방해하지 않고 여러 뷰 전환의 스타일을 서로 분리할 수 있습니다.

유형은 전환을 캡처하거나 실행할 때만 적용되므로 선택기를 사용하여 해당 유형의 뷰 전환에 대해서만 요소에서 view-transition-name를 설정하거나 설정 해제할 수 있습니다.

/* Determine what gets captured when the type is forwards or backwards */
html:active-view-transition-type(forwards, backwards) {
  :root {
    view-transition-name: none;
  }
  article {
    view-transition-name: content;
  }
  .pagination {
    view-transition-name: pagination;
  }
}

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

/* Animation styles for backwards type only */
html:active-view-transition-type(backwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-right;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-left;
  }
}

/* Animation styles for reload type only (using the default root snapshot) */
html:active-view-transition-type(reload) {
  &::view-transition-old(root) {
    animation-name: fade-out, scale-down;
  }
  &::view-transition-new(root) {
    animation-delay: 0.25s;
    animation-name: fade-in, scale-up;
  }
}

다음 페이지로 나누기 데모에서는 탐색 중인 페이지 번호에 따라 페이지 콘텐츠가 앞뒤로 움직입니다. 유형은 document.startViewTransition에 전달되는 클릭에 따라 결정됩니다.

유형과 관계없이 모든 Active View 전환을 타겟팅하려면 대신 :active-view-transition 의사 클래스 선택기를 사용하면 됩니다.

html:active-view-transition {
    …
}

뷰 전환 루트에서 클래스 이름이 있는 여러 뷰 전환 스타일 처리

특정 유형의 보기에서 다른 보기로 전환할 때 특별한 맞춤 전환이 필요한 경우가 있습니다. '뒤로' 탐색은 '앞으로' 탐색과 달라야 합니다.

'뒤로' 이동할 때 다양한 전환이 이루어집니다. 최소 데모 출처.

전환 유형 이전에는 전환 루트에 클래스 이름을 일시적으로 설정하여 이러한 사례를 처리할 수 있었습니다. document.startViewTransition를 호출할 때 이 전환 루트는 JavaScript에서 document.documentElement를 사용하여 액세스할 수 있는 <html> 요소입니다.

if (isBackNavigation) {
  document.documentElement.classList.add('back-transition');
}

const transition = document.startViewTransition(() =>
  updateTheDOMSomehow(data)
);

try {
  await transition.finished;
} finally {
  document.documentElement.classList.remove('back-transition');
}

전환이 완료된 후 클래스를 삭제하기 위해 이 예에서는 전환이 최종 상태에 도달하면 확인되는 프로미스인 transition.finished를 사용합니다. 이 객체의 다른 속성은 API 참조에서 다룹니다.

이제 CSS에서 이 클래스 이름을 사용하여 전환을 변경할 수 있습니다.

/* 'Forward' transitions */
::view-transition-old(root) {
  animation: 90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

::view-transition-new(root) {
  animation: 210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 300ms
      cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

/* Overrides for 'back' transitions */
.back-transition::view-transition-old(root) {
  animation-name: fade-out, slide-to-right;
}

.back-transition::view-transition-new(root) {
  animation-name: fade-in, slide-from-left;
}

미디어 쿼리와 마찬가지로 이러한 클래스는 view-transition-name를 가져오는 요소를 변경하는 데에도 사용될 수 있습니다.

다른 애니메이션을 정지하지 않고 전환 실행

동영상 전환 위치에 대한 다음 데모를 확인하세요.

동영상 전환. 최소 데모 출처.

뭔가 문제가 있는 것을 발견하셨나요? 모르셨더라도 걱정하지 마세요. 다음과 같이 속도가 느려집니다.

동영상 전환은 더 느립니다. 최소 데모 출처.

전환하는 동안 동영상이 정지된 것처럼 보이다가 재생 중인 버전의 동영상이 페이드인됩니다. ::view-transition-old(video)는 이전 뷰의 스크린샷이고 ::view-transition-new(video)는 새 뷰의 라이브 이미지이기 때문입니다.

이를 수정할 수 있지만 먼저 수정할 가치가 있는지 자문해 보세요. 전환이 정상 속도로 재생될 때 '문제'가 표시되지 않는다면 변경하지 않겠습니다.

정말로 문제를 해결하려면 ::view-transition-old(video)를 표시하지 말고 ::view-transition-new(video)로 바로 전환합니다. 이렇게 하려면 기본 스타일과 애니메이션을 재정의하면 됩니다.

::view-transition-old(video) {
  /* Don't show the frozen old view */
  display: none;
}

::view-transition-new(video) {
  /* Don't fade the new view in */
  animation: none;
}

이상입니다

동영상 전환은 더 느립니다. 최소 데모 출처.

이제 동영상이 전환되는 동안 재생됩니다.

JavaScript로 애니메이션 만들기

지금까지 모든 전환은 CSS를 사용하여 정의되었지만 CSS로는 충분하지 않은 경우도 있습니다.

원 전환. 최소 데모 출처.

CSS만으로는 이러한 전환이 이뤄질 수 없는 부분도 있습니다.

  • 애니메이션은 클릭 위치에서 시작됩니다.
  • 애니메이션은 가장 먼 모서리까지 반경을 가진 원으로 끝납니다. 다만 향후 CSS에서도 이 작업이 가능하기를 바랍니다.

다행히 Web Animation API를 사용하여 전환을 만들 수 있습니다.

let lastClick;
addEventListener('click', event => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y)
  );

  // With a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: 'ease-in',
        // Specify which pseudo-element to animate
        pseudoElement: '::view-transition-new(root)',
      }
    );
  });
}

이 예에서는 전환 의사 요소가 성공적으로 생성되면 확인되는 프로미스인 transition.ready를 사용합니다. 이 객체의 다른 속성은 API 참조에서 다룹니다.

개선사항인 전환

View Transition API는 DOM 변경사항을 '래핑'하고 전환을 생성하도록 설계되었습니다. 그러나 전환을 개선으로 취급해야 합니다. DOM 변경에 성공하지만 전환에 실패하는 경우 앱이 '오류' 상태가 되어서는 안 됩니다. 전환에 실패해서는 안 되지만 전환이 발생하더라도 나머지 사용자 환경이 중단되지는 않는 것이 좋습니다.

전환을 개선사항으로 처리하려면 전환 실패 시 앱에서 오류가 발생할 수 있는 방식으로 전환 프로미스를 사용하지 않도록 주의하세요.

부적절한 예
async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  await transition.ready;

  document.documentElement.animate(
    {
      clipPath: [`inset(50%)`, `inset(0)`],
    },
    {
      duration: 500,
      easing: 'ease-in',
      pseudoElement: '::view-transition-new(root)',
    }
  );
}

이 예에서 문제는 전환이 ready 상태에 도달할 수 없는 경우 switchView()가 거부된다는 점입니다. 그렇다고 해서 뷰가 전환되지 않은 것은 아닙니다. DOM이 성공적으로 업데이트되었을 수도 있지만 중복된 view-transition-name이 있어 전환을 건너뛰었습니다.

다음을 수행합니다.

의견을 제시하지
async function switchView(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    await updateTheDOM(data);
    return;
  }

  const transition = document.startViewTransition(async () => {
    await updateTheDOM(data);
  });

  animateFromMiddle(transition);

  await transition.updateCallbackDone;
}

async function animateFromMiddle(transition) {
  try {
    await transition.ready;

    document.documentElement.animate(
      {
        clipPath: [`inset(50%)`, `inset(0)`],
      },
      {
        duration: 500,
        easing: 'ease-in',
        pseudoElement: '::view-transition-new(root)',
      }
    );
  } catch (err) {
    // You might want to log this error, but it shouldn't break the app
  }
}

이 예에서는 transition.updateCallbackDone를 사용하여 DOM 업데이트를 기다린 다음 실패하면 거부합니다. switchView는 전환이 실패해도 더 이상 거부되지 않고 DOM 업데이트가 완료되면 확인되고 실패하면 거부됩니다.

새 뷰가 '정착'되었을 때(예: 애니메이션 전환이 완료되거나 끝까지 건너뜀) switchView이 해결되도록 하려면 transition.updateCallbackDone를 transition.finished로 바꿉니다.

폴리필은 아니지만...

이는 폴리필하기 쉬운 특성이 아닙니다. 그러나 이 도우미 함수를 사용하면 뷰 전환을 지원하지 않는 브라우저에서 훨씬 쉽게 작업을 수행할 수 있습니다.

function transitionHelper({
  skipTransition = false,
  types = [],
  update,
}) {

  const unsupported = (error) => {
    const updateCallbackDone = Promise.resolve(update()).then(() => {});

    return {
      ready: Promise.reject(Error(error)),
      updateCallbackDone,
      finished: updateCallbackDone,
      skipTransition: () => {},
      types,
    };
  }

  if (skipTransition || !document.startViewTransition) {
    return unsupported('View Transitions are not supported in this browser');
  }

  try {
    const transition = document.startViewTransition({
      update,
      types,
    });

    return transition;
  } catch (e) {
    return unsupported('View Transitions with types are not supported in this browser');
  }
}

그리고 다음과 같이 사용할 수 있습니다.

function spaNavigate(data) {
  const types = isBackNavigation ? ['back-transition'] : [];

  const transition = transitionHelper({
    update() {
      updateTheDOMSomehow(data);
    },
    types,
  });

  // …
}

뷰 전환을 지원하지 않는 브라우저에서는 계속 updateDOM가 호출되지만 애니메이션 전환은 없습니다.

전환 중에 <html>에 추가할 classNames를 제공하여 탐색 유형에 따라 전환을 더 쉽게 변경할 수도 있습니다.

뷰 전환을 지원하는 브라우저에서도 애니메이션을 원하지 않으면 true를 skipTransition에 전달할 수 있습니다. 이 기능은 사이트에 전환을 사용하지 않는 사용자 환경설정이 있는 경우 유용합니다.

프레임워크 사용

DOM 변경을 추상화하는 라이브러리나 프레임워크로 작업하는 경우, DOM 변경이 언제 완료되었는지 아는 것은 까다로운 부분입니다. 다음은 다양한 프레임워크에서 위의 도우미를 사용하는 예입니다.

  • 반응: 여기서 핵심은 일련의 상태 변경사항을 동기식으로 적용하는 flushSync입니다. 예, API 사용에 관한 중대한 경고가 있지만, 댄 아브라모프가 이 경우에 해당 API가 적절하다고 확인해 줍니다. React 및 비동기 코드에서 평소와 같이 startViewTransition에서 반환된 다양한 프로미스를 사용할 때는 코드가 올바른 상태로 실행되고 있는지 확인해야 합니다.
  • Vue.js - 여기서 핵심은 nextTick로, DOM이 업데이트되면 처리됩니다.
  • Svelte: Vue와 매우 비슷하지만 다음 변경사항을 기다리는 메서드는 tick입니다.
  • Lit: 여기서 핵심은 구성요소 내의 this.updateComplete 프로미스로, DOM이 업데이트되면 처리됩니다.
  • Angular: 여기서 키는 applicationRef.tick로, 대기 중인 DOM 변경사항을 플러시합니다. Angular 버전 17부터 @angular/router와 함께 제공되는 withViewTransitions를 사용할 수 있습니다.

API 참조

const viewTransition = document.startViewTransition(update)

새 ViewTransition를 시작합니다.

update는 문서의 현재 상태가 캡처되면 호출되는 함수입니다.

그런 다음 updateCallback에서 반환된 프로미스가 처리되면 다음 프레임에서 전환이 시작됩니다. updateCallback에서 반환된 프로미스가 거부되면 전환이 취소됩니다.

const viewTransition = document.startViewTransition({ update, types })

지정된 유형으로 새 ViewTransition를 시작합니다.

update는 문서의 현재 상태가 캡처되면 호출됩니다.

types는 전환을 캡처하거나 실행할 때 전환의 활성 유형을 설정합니다. 처음에는 비어 있습니다. 자세한 내용은 아래에 있는 viewTransition.types를 참고하세요.

ViewTransition의 인스턴스 멤버:

viewTransition.updateCallbackDone

updateCallback에서 반환한 프로미스가 처리될 때 처리되거나 거부되면 거부되는 프로미스입니다.

View Transition API는 DOM 변경사항을 래핑하고 전환을 만듭니다. 그러나 전환 애니메이션의 성공 여부를 고려하지 않고 DOM 변경 여부와 시기만 알고 싶을 때가 있습니다. updateCallbackDone는 해당 사용 사례에 사용됩니다.

viewTransition.ready

전환의 의사 요소가 생성되고 애니메이션이 시작되려고 하면 이 프로미스가 처리됩니다.

전환을 시작할 수 없으면 거부됩니다. 이는 잘못된 구성(예: 중복 view-transition-name)으로 인해 발생하거나 updateCallback가 거부된 프로미스를 반환하는 경우일 수 있습니다.

이는 JavaScript로 전환 의사 요소에 애니메이션을 적용하는 데 유용합니다.

viewTransition.finished

최종 상태가 사용자에게 완전히 표시되고 상호작용이 가능해지면 처리되는 프로미스입니다.

updateCallback가 거부된 프로미스를 반환하는 경우에만 거부됩니다. 이는 최종 상태가 생성되지 않았음을 나타내기 때문입니다.

그렇지 않고 전환이 시작되지 않거나 전환 중에 건너뛰는 경우에도 최종 상태에 계속 도달하므로 finished가 처리됩니다.

viewTransition.types

Active View 전환 유형을 보유하는 Set과 같은 객체입니다. 항목을 조작하려면 해당 인스턴스 메서드 clear(), add(), delete()를 사용합니다.

CSS의 특정 유형에 응답하려면 전환 루트에서 :active-view-transition-type(type) 의사 클래스 선택기를 사용합니다.

뷰 전환이 완료되면 유형이 자동으로 삭제됩니다.

viewTransition.skipTransition()

전환의 애니메이션 부분을 건너뜁니다.

DOM 변경사항이 전환과 별개이므로 updateCallback 호출을 건너뛰지 않습니다.

기본 스타일 및 전환 참조

::view-transition
표시 영역을 채우고 각 ::view-transition-group를 포함하는 루트 의사 요소입니다.
::view-transition-group

절대 위치

'이전' 상태와 '이후' 상태 간에 width 및 height를 전환합니다.

'이전' 및 '이후' 표시 영역 공간 쿼드 간에 transform를 전환합니다.

::view-transition-image-pair

그룹을 채울 수 있는 절대 위치에 있습니다.

mix-blend-mode가 이전 뷰와 새 뷰에 미치는 영향을 제한하는 isolation: isolate가 있습니다.

::view-transition-new 및 ::view-transition-old

래퍼의 절대 왼쪽 상단에 배치됩니다.

그룹 너비의 100% 를 채우지만 자동 높이가 있으므로 그룹을 채우지 않고 가로세로 비율을 유지합니다.

실제 크로스 페이드를 허용하는 mix-blend-mode: plus-lighter가 있습니다.

기존 뷰는 opacity: 1에서 opacity: 0로 전환됩니다. 새 뷰가 opacity: 0에서 opacity: 1로 전환됩니다.

의견

개발자 의견은 항상 환영합니다. 문의하려면 GitHub의 CSS 실무 그룹에 문제를 제출하고 제안 및 질문을 보내주세요. 문제 앞에 [css-view-transitions]를 붙입니다.

버그가 발생하면 대신 Chromium 버그를 신고하세요.