이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

Bramus

저는 Google I/O 2024에서 보기 전환을 위한 다음 단계인 다중 페이지 애플리케이션 (MPA)의 문서 간 보기 전환을 발표했습니다.

이에 더해 일반적으로 뷰 전환을 더 쉽게 사용할 수 있도록 하는 몇 가지 개선사항을 공유해 드렸습니다.

view-transition-class를 사용하여 뷰 전환 의사 요소 간에 애니메이션 스타일 공유
활성 유형의 선택적 뷰 전환

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

MPA의 문서 간 뷰 전환

브라우저 지원

소스

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

많은 개발자가 뷰 전환을 사용하여 무엇을 빌드했는지 확인할 수 있습니다. '썸네일을 대형 사진으로 만드는' 일반적인 구현부터 Airbnb의 이와 같이 고도로 맞춤설정된 몰입형 환경까지 다양합니다. 대단합니다.

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 데모는 이러한 모든 기능과 함께 몇 가지 개선사항을 결합합니다.

Stack Navigator 데모의 녹화본입니다. 탐색 활성화 정보에 따라 pagereveal 이벤트에서 맞춤설정되는 문서 간 뷰 전환을 사용합니다. 사전 렌더링도 사용됩니다.

동일한 출처에 호스팅된 교차 문서 탐색이 포함된 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를 사용하면 추가되거나 삭제된 카드를 제외한 모든 카드에 동일한 animation-timing-function이 적용됩니다.

view-transition-class에 관한 자세한 내용은 view-transition-class 관련 문서를 참고하세요.

활성 유형의 선택적 뷰 전환

뷰 전환을 위한 또 다른 개선 사항은 뷰 전환을 캡처하고 실행할 때 뷰 전환에 유형을 추가하는 것입니다. 이렇게 하면 하나의 선언이 다른 것을 변경하지 않고도 동일한 페이지에서 다양한 뷰 전환을 더 쉽게 작업할 수 있습니다.

예를 들어 페이지로 나누기 순서로 다음 페이지 또는 이전 페이지로 이동할 때 시퀀스에서 상위 페이지로 이동할지 아니면 하위 페이지로 이동하는지에 따라 다른 애니메이션을 사용해야 할 수 있습니다.

페이지로 나누기 데모 녹화 영상입니다. 유형에 따라 사용할 애니메이션이 결정됩니다. 활성화된 전환 유형 덕분에 스타일 시트에서 스타일이 구분됩니다.

활성 유형 전에 클래스를 DOM에 추가하고 CSS의 해당 클래스에 응답할 수 있습니다. 그러나 전환이 완료된 후에 정리해야 합니다.

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

동일한 문서 뷰 전환의 경우 이제 객체를 허용하는 types를 startViewTransition 메서드에 전달합니다. 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 버그를 신고하세요.