뷰 전환의 새로운 기능 (Google I/O 2024 업데이트)

Bramus

게시일: 2024년 5월 16일

Google I/O 2024에서 보기 전환의 다음 단계인 멀티 페이지 애플리케이션 (MPA)용 교차 문서 보기 전환을 발표했습니다.

이 외에도 일반적인 뷰 전환을 더 쉽게 사용할 수 있는 몇 가지 개선사항을 공유했습니다.

• view-transition-class를 사용하여 뷰 전환 가상 요소 간에 애니메이션 스타일을 공유합니다.
• 활성 유형을 사용한 선택적 뷰 전환

이러한 개선사항은 단일 페이지 애플리케이션 (SPA)의 동일한 문서 뷰 전환과 MPA의 교차 문서 뷰 전환 모두에 적용됩니다.

MPA의 교차 문서 보기 전환

Chrome 111에서 Chrome팀은 웹 빌드 커뮤니티에서 호평을 받은 기능인 단일 페이지 애플리케이션을 위한 동일한 문서 보기 전환을 출시했습니다.

많은 분들이 뷰 전환을 사용하여 빌드한 것을 보니 정말 좋습니다. '썸네일을 큰 사진으로 확대'하는 일반적인 구현부터 Airbnb의 이 예와 같은 고도로 맞춤설정된 몰입형 환경까지 다양합니다. 대단해요!

하지만 초기 구현에서는 뷰 전환을 사용하려면 SPA를 빌드해야 했습니다. Chrome 126부터는 더 이상 그렇지 않습니다. 이제 동일 출처 탐색에 대해 뷰 전환이 기본적으로 사용 설정됩니다. 이제 동일한 출처의 두 문서 간에 뷰 전환을 만들 수 있습니다.

교차 문서 뷰 전환을 사용 설정하려면 양쪽 끝에서 모두 선택해야 합니다. 이렇게 하려면 @view-transition at-rule을 사용하고 navigation 설명자를 auto로 설정합니다.

@view-transition {
  navigation: auto;
}

크로스 문서 뷰 전환은 동일한 문서 뷰 전환과 동일한 빌딩 블록과 원칙을 사용합니다. view-transition-name가 적용된 요소가 캡처되며 CSS 애니메이션을 사용하여 애니메이션을 맞춤설정할 수 있습니다.

교차 문서 보기 전환을 맞춤설정하려면 보기 전환 객체에 액세스할 수 있는 pageswap 및 pagereveal 이벤트를 사용하세요.

• pageswap을 사용하면 이전 스냅샷이 생성되기 직전에 나가는 페이지에서 막바지 변경을 할 수 있습니다.
• pagereveal를 사용하면 초기화된 후 렌더링이 시작되기 전에 새 페이지를 맞춤설정할 수 있습니다.

두 이벤트 모두 NavigationActivation 객체에 액세스하여 이전 및 새 대상 기록 항목 또는 탐색 유형을 기반으로 교차 문서 뷰 전환을 맞춤설정할 수 있습니다.

또한 렌더링 차단으로 콘텐츠가 로드될 때까지 기다리고 사전 렌더링을 활용하여 뷰 전환이 실행되기 전의 로드 시간을 개선할 수 있습니다.

데모

이 스택 탐색기 데모는 이러한 모든 기능 (및 일부 개선사항)을 결합합니다.

동일한 출처에서 호스팅되는 교차 문서 탐색이 있는 MPA입니다. pagereveal를 사용하면 이전 및 새 대상 기록 항목을 기반으로 애니메이션 유형이 결정됩니다.

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

도움말 읽기

교차 문서 뷰 전환을 활성화하고 맞춤설정하는 방법에 관한 자세한 내용은 교차 문서 뷰 전환 문서를 참고하세요.

전환 개선사항 보기

MPA용 교차 문서 뷰 전환을 제공하는 것 외에도 Chrome에는 일반적인 뷰 전환 작업에 관한 몇 가지 개선사항이 포함되어 있습니다.

이러한 개선사항은 SPA의 동일한 문서 뷰 전환과 MPA의 교차 문서 뷰 전환 모두에 적용됩니다.

view-transition-class와 애니메이션 스타일 공유

지금까지 동일한 방식으로 여러 스냅샷에 애니메이션을 적용할 때는 고유한 view-transition-name가 있는 모든 요소에 대해 의사 선택기를 반복하여 각 스냅샷을 개별적으로 타겟팅해야 했습니다.

이제 view-transition-class를 사용해 모든 스냅샷에 공유 이름을 추가할 수 있습니다. 의사 선택기에서 이 공유 이름을 사용하여 일치하는 모든 스냅샷을 타겟팅합니다. 이렇게 하면 하나의 요소에서 여러 요소로 자동으로 확장되는 훨씬 간단한 선택기가 생성됩니다.

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

다음 카드 예시에서는 view-transition-class를 사용하여 하나의 선택기로 여러 스냅샷에 동일한 애니메이션 타이밍을 적용합니다.

view-transition-class에 대해 자세히 알아보려면 view-transition-class에 관한 전용 문서를 참고하세요.

활성 유형을 사용한 선택적 뷰 전환

뷰 전환의 또 다른 개선사항은 캡처하고 실행할 때 뷰 전환에 유형을 추가하는 기능이 도입되었다는 점입니다. 이렇게 하면 서로를 변경하는 선언 없이 동일한 페이지에서 다양한 뷰 전환을 더 쉽게 사용할 수 있습니다.

예를 들어 페이지로 나누기 시퀀스에서 다음 페이지 또는 이전 페이지로 이동할 때 시퀀스에서 더 높은 페이지로 이동하는지 더 낮은 페이지로 이동하는지에 따라 다른 애니메이션을 사용할 수 있습니다.

활성 유형 이전에는 클래스를 DOM에 추가하고 CSS에서 해당 클래스에 응답할 수 있었습니다. 하지만 전환이 완료된 후에도 정리해야 합니다.

뷰 전환 유형을 사용하면 동일한 결과를 얻을 수 있으며, 뷰 전환이 완료되면 이러한 유형이 자동으로 정리된다는 추가 이점이 있습니다. 유형은 캡처하거나 전환을 실행할 때만 적용됩니다.

동일한 문서 뷰 전환의 경우 이제 객체를 허용하는 startViewTransition 메서드에 types을 전달합니다. update은 DOM을 업데이트하는 콜백 함수이고 types은 문자열 시퀀스입니다.

const direction = determineBackwardsOrForwards();

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

교차 문서 뷰 전환의 경우 types 설명자를 사용하여 @view-transition at-rule에서 유형을 설정하거나 pageswap 및 pagereveal 이벤트에서 즉시 설정합니다.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

유형을 설정하면 뷰 전환 루트에 적용되는 :active-view-transition-type() 및 :active-view-transition 의사 클래스 선택기를 사용하여 CSS에서 이러한 유형에 응답할 수 있습니다.

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

뷰 전환 유형에 대해 자세히 알아보려면 동일한 문서의 뷰 전환 및 교차 문서 뷰 전환에 관한 전용 문서를 참고하세요.

의견

개발자 의견은 언제나 환영합니다. 이렇게 하려면 제안사항과 질문을 포함하여 GitHub에서 CSS 작업 그룹에 문제를 제출하세요. 문제 앞에 [css-view-transitions]를 붙입니다.

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