::view-transition-image-pair

Limited availability

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

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

::view-transition-image-pair CSS 의사 요소는 컨테이너의 뷰 전환의 오래된 뷰 상태와 새로운 뷰 상태, 전환의 전후를 나타냅니다.

뷰 전환이 이루어지는 동안, ::view-transition-image-pair뷰 전환 의사 요소 트리 에 기술된 것처럼 연관된 의사 요소 트리에 포함됩니다. 이는 ::view-transition-group 의 자식 요소로만 존재합니다. 자식 요소로 ::view-transition-new 또는 ::view-transition-old를 가질 수 있으며, 둘 다 가질 수도 있습니다.

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

css
:root::view-transition-image-pair(*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

뷰 전환이 이루어지는 동안, ::view-transition-image-pair 의 뷰 전환 스타일시트에 isolation: isolate가 설정되어 있어 그 자식 요소들이 다른 시각적인 결과물에 영향을 주지 않고 비정상적인 블렌드 모드로 혼합될 수 있습니다.

구문

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

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

*

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

root

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

<custom-ident>

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

예제

css
::view-transition-image-pair(root) {
  isolation: auto;
}

명세서

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

브라우저 호환성

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-image-pair()

Legend

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

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

같이 보기