::view-transition-group

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimental: 이 기능은 실험적인 기능입니다.
프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하세요.

::view-transition-group CSS 의사 요소는 단일 뷰 전환 스냅샷 그룹을 나타냅니다.

뷰 전환이 이루어지는 동안, ::view-transition뷰 전환 의사 요소 트리 에 기술된 것처럼 연관된 의사 요소 트리에 포함됩니다. 이는 ::view-transition의 자식으로만 존재하며, ::view-transition-image-pair 를 자식으로 가집니다.

::view-transition-group 는 UA 스타일시트에서 다음과 같은 스타일을 기본으로 부여 받습니다.

css
html::view-transition-group(*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

기본적으로 선택된 요소는 오래된 뷰 상태를 나타내는 ::view-transition-old 의사 요소의 크기와 위치를 반영하지만, 오래된 뷰 상태가 없는 경우에 새로운 뷰 상태를 나타내는 ::view-transition-new 의사 요소의 크기위 위치를 반영하게 됩니다.

오래된 뷰 상태와 새로운 뷰 상태가 동시에 존재한다면, 뷰 전환 스타일 시트의 스타일은 이 의사 요소의 너비높이를 오래된 뷰 상태의 테두리 박스로부터 새로운 뷰 상태의 테두리 박스로의 애니메이션을 진행합니다.

참고 : 뷰 전환 스타일은 뷰 전환이 이루어지는 동안 동적으로 생성됩니다. 더 많은 정보는 setup transition pseudo-elementsupdate pseudo-element styles 섹션 명세서를 참고하여 확인할 수 있습니다.

더불어, 요소의 변형은 오래된 뷰 상태의 화면 공간 변형에서 새로운 뷰 상태의 화면 공간으로 애니메이션이 진행됩니다. 이러한 스타일은 애니메이션이 진행된 속성 값이 전환을 시작할 때 결정되므로 동적으로 생성됩니다.

구문

css
::view-transition-group(<pt-name-selector>) {
  /* ... */
}

<pt-name-selector> 는 다음 값들을 가질 수 있습니다.

*

의사 요소를 모든 뷰 전환 그룹에 대해 일치하도록 합니다.

root

의사 요소를 사용자 에이전트가 생성한 기본 root 뷰 전환 그룹과 일치하도록 합니다. 이 그룹은 페이지 전체의 뷰 전환을 포함하고, view-transition-name 속성을 통해 고유한 뷰 전환 그룹에 할당되지 않은 모든 요소를 포함합니다.

<custom-ident>

view-transition-name 속성을 통해 의사 요소를 주어진 <custom-ident> 로부터 할당받아 생성된 특정 뷰 전환 그룹과 일치하도록 합니다.

예제

css
view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}

명세서

Specification
CSS View Transitions Module Level 1
# ::view-transition-group

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::view-transition-group()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

같이 보기