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

Jake Archibald

Bramus

보기 전환이 단일 문서에서 실행되는 경우 이를 동일 문서 뷰 전환이라고 합니다. 일반적으로 자바스크립트가 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 선언으로 인해 유사 요소 트리가 변경되었습니다.

::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는 요소가 나머지 너비까지 늘어나지 않고 텍스트의 크기가 되도록 사용됩니다. 이 속성이 없는 경우 뒤로 화살표를 사용하면 두 페이지에서 헤더 텍스트 요소의 크기가 동일하게 줄어들지 않습니다.

이제 다음 3가지 단계를 살펴보겠습니다.

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

하지만 이번에는 기본값을 사용합니다.

이제 제목 텍스트가 뒤로 버튼을 위한 공간을 만들기 위해 약간 만족스럽게 슬라이드합니다.

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

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

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))로 모든 카드(새로 추가된 카드 포함)에 동일한 타이밍이 적용됩니다.

디버그 전환

뷰 전환은 CSS 애니메이션을 기반으로 작성되므로 Chrome DevTools의 Animations 패널은 전환 디버깅에 유용합니다.

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

전환 요소는 동일한 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;
});

Promise가 실행될 때까지 전환이 시작되지 않습니다. 이 시간 동안에는 페이지가 정지되므로 지연이 최소한으로 유지되어야 합니다. 특히 네트워크 가져오기는 .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로 전환되면 전체 이미지가 '잘리지 않습니다'.

자세한 내용은 (보기 전환: 가로세로 비율 변경 처리)(https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/)을 참조하세요.

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

모바일과 데스크톱에서 서로 다른 전환을 사용할 수도 있습니다. 예를 들어 모바일에서는 전체 슬라이드를 실행하지만 데스크톱에서는 좀 더 미세한 슬라이드입니다.

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

/* 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;
  }
}

하지만 '움직임 감소'가 선호된다고 해서 사용자가 움직임이 없다는 뜻은 아닙니다. 위의 스니펫 대신 좀 더 섬세한 애니메이션을 선택할 수도 있지만, 요소와 데이터 흐름 간의 관계를 계속 표현하는 애니메이션을 선택할 수 있습니다.

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

하나의 특정 보기에서 다른 보기로 전환할 때 특별히 맞춤화된 전환을 사용해야 하는 경우가 있습니다. 예를 들어 페이지로 나누기 순서에서 다음 또는 이전 페이지로 이동할 때 순서에서 상위 페이지로 이동할지 또는 하위 페이지로 이동하는지 여부에 따라 콘텐츠를 다른 방향으로 슬라이드할 수 있습니다.

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

동일한 문서 뷰 전환에서 유형을 사용하려면 types를 startViewTransition 메서드에 전달합니다. 이를 위해 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를 호출할 때 이 전환 루트는 <html> 요소이며 JavaScript에서 document.documentElement를 사용하여 액세스할 수 있습니다.

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 사용에 대해 큰 경고가 표시되지만 댄 아브라모프는 이 경우에 적절하다고 확신합니다. 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가 거부된 프로미스를 반환하는 경우입니다.

이는 자바스크립트로 전환 의사 요소에 애니메이션을 적용하는 데 유용합니다.

viewTransition.finished

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

최종 상태가 생성되지 않았음을 나타내므로 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 버그를 신고하세요.