뷰 전환의 새로운 기능 (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 객체에 액세스하여 이전 대상 기록 항목과 새 대상 기록 항목 또는 탐색 유형을 기반으로 교차 문서 뷰 전환을 맞춤설정할 수 있습니다.

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

데모

이 Stack Navigator 데모는 이러한 모든 기능과 몇 가지 개선사항을 결합합니다.

교차 문서 탐색이 있고 동일한 출처에 호스팅되는 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 버그를 신고하세요.