1. 소개
이 섹션은 규범적이지 않습니다.
[css-view-transitions-1]에서 명세된 뷰 트랜지션은 개발자가 document의 시각적 상태 간에 애니메이션 트랜지션을 만들 수 있도록 하는 기능입니다.
레벨 2는 해당 명세를 확장하여, 동일 출처 문서 간 내비게이션에서도 트랜지션을 가능하게 하는 API와 라이프사이클을 추가하며, 더 풍부한 뷰 트랜지션을 쉽게 작성할 수 있도록 몇 가지 기능을 추가합니다.
레벨 2에서는 다음을 정의합니다:
-
문서 간 뷰 트랜지션 — @view-transition 규칙 및 문서 간 뷰 트랜지션 라이프사이클을 가능하게 하는 알고리즘이 포함됩니다.
-
선택적 뷰 트랜지션 — active view transition의 존재 여부, 그리고 특정 타입의 활성 뷰 트랜지션에 따라 스타일을 매칭하는 방법입니다.
-
뷰 트랜지션 의사 요소 간 스타일 공유 — 한 번 선언한 스타일을 여러 뷰 트랜지션 의사 요소에 사용할 수 있는 방법입니다. 여기에는 view-transition-class 속성 및 명명된 의사 요소에 대한 추가 사항이 포함됩니다.
2. 문서 간 뷰 트랜지션
2.1. 개요
이 섹션은 규범적이지 않습니다.
2.1.1. 활성화
동일 문서 뷰 트랜지션에서는 저자가 JavaScript로startViewTransition을
호출하여 뷰 트랜지션을 시작합니다.
문서 간 뷰 트랜지션에서는 뷰 트랜지션을 트리거하는 것이 두 문서 간의 내비게이션이며, 다음 조건들이 모두 충족되어야 합니다:
-
두 문서가 동일 출처여야 합니다;
-
내비게이션이 진행되는 동안 페이지가 계속 표시되어야 합니다;
-
사용자가 페이지와 상호작용(예: 링크 클릭, 폼 제출)하거나 브라우저 UI를 통해
traverse내비게이션(뒤로/앞으로)을 직접 시작해야 합니다. URL 바를 통한 내비게이션 등은 제외됩니다; -
내비게이션에 교차 출처 리다이렉트가 없어야 합니다;
-
두 문서 모두 @view-transition 규칙을 사용하여 문서 간 뷰 트랜지션을 옵트인해야 합니다.
자세한 내용은 라이프사이클 섹션을 참고하세요.
2.1.2. 새로운 상태가 안정화될 때까지 대기
동일 문서 뷰 트랜지션에서는 저자가startViewTransition에
전달된 콜백을 사용하여 트랜지션의 새로운 상태가 안정적일 때를 지정할 수 있습니다.
문서 간 뷰 트랜지션은 선언적이므로, 명시적인 promise는 없습니다. 대신, 사용자 에이전트는 렌더 차단 메커니즘을 활용해 문서가 안정화되었는지 판단합니다.
저자는 blocking 속성을 사용하여 트랜지션을 다음 조건까지 지연시킬 수 있습니다:
-
필요한 스크립트에
blocking속성을 추가해 모든 예상 스크립트가 실행될 때까지 -
필요한 스타일에
blocking속성을 추가해 모든 예상 스타일이 적용될 때까지 -
expectHTMLLinkElement요소를 사용해 예상하는 HTML 요소가 파서에 의해 확인될 때까지
참고: 렌더 차단 메커니즘을 과도하게 사용하면 이전 상태가 오랫동안 정지되어 사용자 경험이 저하될 수 있습니다. 이를 방지하기 위해 렌더 차단 요소가 적시에 제공되도록 하는 것이 좋습니다.
이 예시에서는 아래 조건이 모두 충족될 때까지 이전 문서의 마지막 프레임이 표시되고, 애니메이션이 지연됩니다:
-
style.css가 적용되어 새로운 상태에 올바른 스타일이 반영됨을 보장 -
fixup.js가 실행되어 스크립트 기반 레이아웃 보정이 완료됨을 보장 -
main-article섹션이 확인되고 파싱되어 충분한 콘텐츠가 로드된 후 트랜지션 진행 허용
<!DOCTYPE html> < html > < head > < !-- 이것은 기본적으로 렌더 차단됩니다 -->< link rel = "stylesheet" href = "style.css" > < !-- 이 스크립트가 레이아웃을 보정하므로, 렌더 차단으로 지정하면 뷰 트랜지션이 활성화되기 전에 실행을 보장할 수 있습니다 -->< script async href = "fixup.js" blocking = "render" ></ script > < !-- main-article 요소가 확인되고 완전히 파싱될 때까지 트랜지션 활성화를 대기 -->< link rel = "expect" href = "#main-article" blocking = "render" > </ head > < body > < header > ...</ header > < main > < article id = "main-article" > ...</ article > </ main > < article id = "secondary-article" > ...</ article > </ body > </ html >
2.1.3. 사용자 정의
ViewTransition
객체는 스크립트에서 트랜지션을 사용자 정의할 수 있게 해줍니다.
동일 문서 뷰 트랜지션에서는 ViewTransition
객체 하나가 startViewTransition
호출을 통해 전체 라이프사이클에 사용됩니다.
문서 간 뷰 트랜지션에서는 이전 문서와 새 문서 각각에 ViewTransition
객체가 하나씩 생성됩니다.
2.1.3.1. 이전 문서에서 뷰 트랜지션 처리
pageswap
이벤트는 문서가 다른 문서로 교체되기 직전에 마지막으로 발생합니다.
이 이벤트를 통해 뷰 트랜지션이 발생하려는지 확인할 수 있고, types를
사용해 트랜지션을 사용자 정의하거나, 캡처된 요소를 마지막 순간에 변경하거나, 필요하다면 트랜지션을 건너뛸 수 있습니다.
PageSwapEvent
인터페이스는 viewTransition
객체를 갖고 있으며, 내비게이션이 뷰 트랜지션에 적합한 경우 null이 아닙니다.
그리고 activation
객체를 통해 리다이렉트 이후의 URL 등 내비게이션 정보를 제공합니다.
트랜지션의 finished
promise는 나중에 문서가 BFCache에서 복원될 때 정리 작업에 사용할 수 있습니다.
2.1.3.2. 새 문서에서 뷰 트랜지션 처리
pagereveal
이벤트는 새 문서의 첫 번째 프레임이 표시되기 직전에 발생합니다.
이 이벤트를 통해 viewTransition
속성을 조회하여 뷰 트랜지션이 여전히 유효한지 확인할 수 있습니다.
동일 문서 뷰 트랜지션과 마찬가지로, 저자는 types를
선택하거나, 캡처된 요소를 마지막 순간에 변경하거나, ready
상태를 기다려 애니메이션을 실행하거나, 트랜지션을 건너뛸 수 있습니다.
2.1.4. 라이프사이클
이 섹션은 규범적이지 않습니다.
성공적인 문서 간 뷰 트랜지션은 다음과 같은 단계로 진행됩니다:
-
이전
Document에서:-
사용자가 링크를 클릭하거나 폼을 제출하거나 브라우저의 뒤로가기 버튼을 누르는 등 내비게이션을 시작합니다.
참고: 일부 내비게이션은 뷰 트랜지션을 트리거하지 않습니다. 예를 들어, URL 바에 새 주소를 입력하는 경우 등입니다.
-
내비게이션이 동일 출처이고, 교차 출처 리다이렉트가 없으며, 이전
Document가 문서 간 뷰 트랜지션에 옵트인한 경우, 이벤트의viewTransition속성은ViewTransition객체가 됩니다. -
저자는 이제
types를 변경하거나,skip으로 트랜지션을 건너뛰는 등 트랜지션을 사용자 정의할 수 있습니다. -
ViewTransition이 건너뛰어지지 않은 경우, 이전 문서의 상태가 캡처됩니다.
-
-
그 다음, 새
Document에서:-
새
Document가 첫 렌더링 기회를 가질 준비가 되면, 새pagereveal이벤트가 새Document에 발생하며,viewTransition속성이 포함됩니다. -
이
ViewTransition의updateCallbackDoneDocument에서 전달됩니다. -
여기서도 저자는
types를 변경하거나,skip으로 트랜지션을 건너뛰는 등 사용자 정의를 할 수 있습니다. -
새 문서의 상태가 캡처되어 트랜지션의 "새" 상태가 됩니다.
-
이 시점부터 트랜지션은 동일 문서 트랜지션과 유사하게 activate view transition 단계로 이어집니다.
-
2.2. 예시
대신, 페이지 1과 페이지 2 모두에서 내비게이션 시 뷰 트랜지션 트리거에 옵트인합니다:
// 두 문서 모두에서:@view-transition { navigation : auto; }
페이지 1에서 페이지 2로 또는 그 반대 링크를 클릭하면 예시 1의 크로스페이드 트랜지션이 생성됩니다. 예시 2, 3, 4의 효과를 내고 싶다면, 의사 요소용 CSS를 두 문서 모두에 추가하세요.
@view-transition { navigation : auto; } @media ( max-width:600 px ) { navigation : none; }
-
두 페이지 모두에서 내비게이션 기반 뷰 트랜지션에 옵트인합니다.
-
클릭 위치를
sessionStorage등으로 새 문서에 전달합니다. -
새 문서에서
ViewTransition객체를pagereveal이벤트로 가로챕니다.
두 페이지 모두에서:
이전 페이지에서:@view-transition { navigation : auto; }
addEventListener새 페이지에서:( 'click' , event=> { sessionStorage. setItem( "lastClickX" , event. clientX); sessionStorage. setItem( "lastClickY" , event. clientY); });
// 이 코드는 초기 로드와 BFCache 복원 시 모두 실행됩니다. addEventListener( "pagereveal" , async event=> { if ( ! event. viewTransition) return ; const x= sessionStorage. getItem( "lastClickX" ) ?? innerWidth/ 2 ; const y= sessionStorage. getItem( "lastClickY" ) ?? innerHeight/ 2 ; const endRadius= Math. hypot( Math. max( x, innerWidth- x), Math. max( y, innerHeight- y) ); await event. viewTransition. ready; // 새 문서의 뷰에 애니메이션 적용 document. documentElement. animate( { clipPath: [ < code data- opaque bs- autolink- syntax= '`circle(0 at ${x}px ${y}px)`' > circle( 0 at ${ x} px ${ y} px) < /code>,< code data- opaque bs- autolink- syntax= '`circle(${endRadius}px at ${x}px ${y}px)`' > circle( ${ endRadius} px at ${ x} px ${ y} px) < /code>,], }, { duration: 500 , easing: 'ease-in' , pseudoElement: '::view-transition-new(root)' } ); })
이전 페이지에서:
window. addEventListener( "pageswap" , event=> { // 예를 들어, 페이지가 숨겨졌거나 내비게이션이 문서 간인 경우 등 if ( ! event. viewTransition) return ; // 뒤로/앞으로 내비게이션에 뷰 트랜지션을 적용하지 않으려면... if ( event. activation. navigationType=== "traverse" ) { event. viewTransition. skipTransition(); } const newURL= new URL( event. activation. entry. url); if ( newURL. pathname=== "/details" && thumbnail. complete) { thumbnail. classList. add( "transition-to-hero" ); // 페이지가 BFCache에서 복원될 때 상태를 정리합니다. event. viewTransition. finished. then(() => { thumbnail. classList. remove( "transition-to-hero" ); }); } });
새 페이지에서:
window. addEventListener( "pagereveal" , event=> { // 예를 들어, 페이지가 숨겨졌거나, 문서 간 내비게이션이거나, 이전 문서에서 트랜지션이 건너뛰어진 경우 등 if ( ! event. viewTransition) return ; const oldURL= new URL( navigation. activation. from . url); if ( newURL. pathname=== "/list" ) { event. viewTransition. types. add( "coming-from-list" ); // 뷰 트랜지션이 끝날 때까지 썸네일을 표시합니다. if ( ! hero. complete) { setToThumbnail( hero); event. viewTransition. finished. then(() => { setToFullResolution( hero); }) } } });
2.3. 문서 간 뷰 트랜지션 옵트인
2.3.1. @view-transition 규칙
@view-transition 규칙은 문서가 문서 간 내비게이션 시
ViewTransition을
설정하고 활성화하도록 지정하는 데 사용됩니다.
@view-transition 규칙의 문법은 다음과 같습니다:
@view-transition {
<declaration-list>
}
@view-transition 규칙은 navigation 및 types 디스크립터를 허용합니다.
참고: 기본 동작에 따라 @view-transition 규칙은 조건부 그룹 규칙 (@media 또는 @supports 등) 안에 중첩될 수 있습니다.
@view-transition 규칙이 Document
document에 대해 변경될 때, 사용자 에이전트는 outbound 트랜지션에 대한 옵트인 상태를 업데이트해야 합니다.
참고: 내비게이션 시 병렬로 읽어야 하므로, 이 결과를 boolean으로 캐싱해야 합니다.
2.3.2. navigation 디스크립터
| 이름: | navigation |
|---|---|
| 적용 대상: | @view-transition |
| 값: | auto | none |
| 초기값: | none |
'navigation' 디스크립터는 특정 타입의 내비게이션을 수행할 때 자동으로 뷰 트랜지션을 시작하도록 옵트인합니다. 이전 문서와 새 문서 모두에 존재해야 합니다.
- none
-
트랜지션이 발생하지 않습니다.
- auto
-
트랜지션은 내비게이션이 동일 출처이고 교차 출처 리다이렉트가 없으며,
NavigationType이 아래와 같을 때 활성화됩니다:-
traverse인 경우, 또는 -
push또는replace이고, user navigation involvement가"browser UI"가 아닐 때.
참고: auto에서 제외되는 내비게이션은 URL 주소창을 통한 이동, 북마크 클릭, 사용자 또는 스크립트가
reload를 실행하는 경우 등입니다. -
이 at-rule은 CSS의 forward-compatible 파싱 요구사항을 준수합니다. 해당 규칙을 이해하지 못하는 적합한 파서도 오류 없이 무시합니다. 인식되지 않거나 구현되지 않은 디스크립터, 또는 이 명세나 향후 버전에서 정의된 문법과 일치하지 않는 값은 전체적으로 무시되어야 하며, @view-transition 규칙을 무효화하지 않습니다.
2.3.3. CSSOM을 사용한 @view-transition 규칙 접근
CSSViewTransitionRule
은 @view-transition 규칙을 나타냅니다.
[Exposed =Window ]interface :CSSViewTransitionRule CSSRule {readonly attribute CSSOMString ; [navigation SameObject ]readonly attribute FrozenArray <CSSOMString >; };types
navigation
getter 단계는 해당 navigation 디스크립터가 존재하면 그 값을, 그렇지 않으면 빈 문자열을 반환합니다.
types
getter 단계는 해당 types 디스크립터가 존재하면 그 값을, 그렇지 않으면 빈 list를 반환합니다.
3. 선택적 뷰 트랜지션
3.1. 개요
이 섹션은 규범적이지 않습니다.
단순한 페이지에서 하나의 뷰 트랜지션만 있을 경우, 참여하는 요소에 view-transition-name 속성을 설정하는 것만으로 충분합니다. 하지만 더 복잡한 상황에서는 여러 뷰 트랜지션을 선언하고, 동시에 한 개만 실행하고 싶을 수 있습니다. 예를 들어, 내비게이션 바 클릭 시 페이지 전체를 슬라이드하거나, 리스트 항목을 드래그할 때 리스트를 정렬하는 경우 등입니다.
각 뷰 트랜지션마다 필요한 것만 캡처되고, 서로 영향을 주지 않도록 하기 위해 이 명세에서는 active types 개념과, :active-view-transition 및 :active-view-transition-type() 의사 클래스를 도입합니다.
:active-view-transition는 document element에 active view transition이 있을 때 매칭되고, :active-view-transition-type()는 선택자에 지정된 타입이 document element의 active view transition의 active types와 일치할 때 매칭됩니다.
ViewTransition의
active
types는 다음 중 하나의 방식으로 지정됩니다:
-
startViewTransition(callbackOptions)호출 시 인자로 전달 -
트랜지션의
types를 언제든 변경 -
문서 간 뷰 트랜지션에서는 types 디스크립터로 선언
3.2. 예시
document. startViewTransition({ update: updateTheDOMSomehow, types: [ "slide-in" , "reverse" ]});
이렇게 하면 다음과 같은 선택자가 모두 활성화됩니다:
:root:active-view-transition-type ( slide-in) {} :root:active-view-transition-type ( reverse) {} :root:active-view-transition-type ( slide-in, reverse) {} :root:active-view-transition-type ( slide-in, something-else) {} :root:active-view-transition{}
타입 없이 트랜지션을 시작하면 ':active-view-transition'만 활성화됩니다:
document. startViewTransition( updateTheDOMSomehow); // 또는 document. startViewTransition({ update: updateTheDOMSomehow});
/* 활성화됨 */ :root{ } :root:active-view-transition{} /* 활성화되지 않음 */ :root:active-view-transition-type ( slide-in) {} :root:active-view-transition-type ( any-type-at-all-except-star) {}
3.3. 활성 뷰 트랜지션 기반 선택
3.3.1. :active-view-transition 의사 클래스
:active-view-transition 의사 클래스는 문서의 루트 요소에 적용되며, 해당 요소가 active view transition을 가지고 있을 때 활성화됩니다.
특이성(specificity)은 :active-view-transition의 경우 의사 클래스 셀렉터 하나입니다.
:active-view-transition 의사 클래스는 document element의 node document 에 active view transition이 non-null일 때 매칭됩니다.
3.3.2. :active-view-transition-type() 의사 클래스
:active-view-transition-type() 의사 클래스는 문서의 루트 요소에 적용되며, 해당 요소에 매칭되는 active view transition이 있을 때 활성화됩니다. 문법 정의는 다음과 같습니다:
:active-view-transition-type(<custom-ident>#)
특이성은 :active-view-transition-type()의 경우 의사 클래스 셀렉터 하나입니다.
:active-view-transition-type() 의사 클래스는 document element에 node document 에 non-null active view transition이 있고, 그 active types에 선택자 인자 중 하나 이상이 포함되어 있을 때 매칭됩니다.
3.4. 진행 중인 뷰 트랜지션의 타입 변경
ViewTransition
인터페이스는 아래처럼 확장됩니다:
[Exposed =Window ]interface {ViewTransitionTypeSet setlike <DOMString >; }; [Exposed =Window ]partial interface ViewTransition {attribute ViewTransitionTypeSet ; };types
ViewTransitionTypeSet
객체는 특별한 의미 없이 문자열의 집합(set)을 나타냅니다.
참고: ViewTransitionTypeSet
에는 :active-view-transition-type에 유효하지 않은 문자열, 예를 들어 <custom-ident>가 아닌 문자열도 포함될 수 있습니다.
types
getter
steps는 this의 active
types를 반환합니다.
3.5. 문서 간 뷰 트랜지션의 타입 활성화
types 디스크립터
| 이름: | types |
|---|---|
| 적용 대상: | @view-transition |
| 값: | none | <custom-ident>+ |
| 초기값: | none |
'types' 디스크립터는 트랜지션을 캡처하거나 수행할 때 active types를 설정합니다.
이는 startViewTransition(callbackOptions)를
해당 types로
호출하는 것과 같습니다.
참고: types 디스크립터는 정의된 Document에만
적용됩니다.
저자가 선택한 타입 집합을 두 문서 모두에서 사용해야 합니다.
4. 뷰 트랜지션 의사 요소 간 스타일 공유
4.1. 개요
이 섹션은 규범적이지 않습니다.
DOM에서 여러 요소를 비슷하게 스타일링할 때, class 속성을 사용하는 것이 일반적입니다. 여러 요소에 공통 이름을 지정하고 클래스 셀렉터로 공유 스타일을 선언합니다.
뷰 트랜지션 의사 요소(예: view-transition-group())는 DOM에 정의되어 있지 않고, view-transition-name 속성으로 정의됩니다. 이를 위해 view-transition-class CSS 속성이 뷰 트랜지션에 HTML 클래스와 동등한 기능을 제공합니다. view-transition-name과 view-transition-class 값이 함께 있는 요소는 의사 요소에서 선택할 수 있으며, 예시처럼 사용할 수 있습니다.
4.2. 예시
< div class = "box" id = "red-box" ></ div > < div class = "box" id = "green-box" ></ div > < div class = "box" id = "yellow-box" ></ div >
div.box{ view-transition-class : any-box; width : 100 px ; height : 100 px ; } #red-box{ view-transition-name : red-box; background : red; } #green-box{ view-transition-name : green-box; background : green; } #yellow-box{ view-transition-name : yellow-box; background : yellow; } /* 아래 스타일은 'view-transition-class' 덕분에 모든 박스에 적용됩니다 */ ::view-transition-group ( *.any-box) { animation-duration : 1 s ; }
4.3. view-transition-class 속성
| 이름: | view-transition-class |
|---|---|
| 값: | none | <custom-ident>+ |
| 초기값: | none |
| 적용 대상: | 모든 요소 |
| 상속: | 아니오 |
| 퍼센트값: | 해당 없음 |
| 계산값: | 명시된 값 그대로 |
| 표준 순서: | 문법에 따라 |
| 애니메이션 타입: | 불연속(discrete) |
view-transition-class는 서로 다른 명명된 뷰 트랜지션 의사 요소에 동일한 스타일 규칙을 적용하는 데 사용할 수 있습니다. view-transition-name은 이전 상태의 요소와 새 상태의 대응 요소를 연결하는 데 사용되고, view-transition-class는 뷰 트랜지션 의사 요소 (::view-transition-group(), ::view-transition-image-pair(), ::view-transition-old(), ::view-transition-new())에서 스타일을 적용하는 용도로만 사용됩니다.
참고로 view-transition-class만으로는 요소가 캡처 대상으로 표시되지 않으며, view-transition-name이 이미 지정된 요소에 추가적인 스타일링 방법으로만 사용됩니다.
- none
-
이 요소에 대해 생성된 명명된 뷰 트랜지션 의사 요소에는 클래스가 적용되지 않습니다.
- <custom-ident>+
-
지정된 모든 <custom-ident> 값(단, none 제외)은 명명된 뷰 트랜지션 의사 요소 셀렉터에서 사용할 때 모두 적용됩니다. none은 view-transition-class의 <custom-ident>으로는 유효하지 않으며, 다른 <custom-ident>와 함께 사용해도 마찬가지입니다.
각 '뷰 트랜지션 클래스'는 트리 범위 이름(tree-scoped name)입니다.
참고: 동일 view-transition-name이 트랜지션의 이전/새 상태 모두에 지정된 경우, 새 상태의 view-transition-class 값만 적용됩니다. 문서 간 뷰 트랜지션에도 동일하게 적용되며, 이전 문서의 클래스는 새 문서에 해당 view-transition-name이 없을 때만 적용됩니다.
4.4. 명명된 뷰 트랜지션 의사 요소에 대한 추가 사항
명명된 뷰 트랜지션 의사 요소 (view-transition-group(), view-transition-image-pair(), view-transition-old(), view-transition-new()) 는 다음 구문을 지원하도록 확장됩니다:
::view-transition-group(<pt-name-and-class-selector>) ::view-transition-image-pair(<pt-name-and-class-selector>) ::view-transition-old(<pt-name-and-class-selector>) ::view-transition-new(<pt-name-and-class-selector>)
여기서 <pt-name-selector>는 기존 정의대로 동작하며, <pt-name-and-class-selector>는 다음 구문 정의를 가집니다:
<pt-name-and-class-selector> = <pt-name-selector> <pt-class-selector>? | <pt-class-selector> <pt-class-selector> = ['.' <custom-ident>]+
위 문법을 해석할 때, 공백은 허용되지 않습니다:
-
<pt-class-selector>의 모든 구성요소 사이
명명된 뷰 트랜지션 의사 요소 selector에 하나 이상의 <custom-ident> 값이 <pt-class-selector>에 포함되어 있으면, 해당 class list 값이 named elements의 해당 의사 요소 view-transition-name 값 전체를 포함할 때만 요소에 매칭됩니다.
다음의 경우 명명된 뷰 트랜지션 의사 요소 특이성은 타입 셀렉터(type selector)와 동일합니다:
-
<pt-name-selector>에 <custom-ident>가 포함된 경우
-
<pt-class-selector>에 하나 이상의 <custom-ident>가 포함된 경우
특이성은 명명된 뷰 트랜지션 의사 요소 selector에서 * 인자가 사용되고 <pt-class-selector>가 비어 있으면 0입니다.
5. document.startViewTransition()
확장
dictionary {StartViewTransitionOptions ViewTransitionUpdateCallback ?=update null ;sequence <DOMString >?=types null ; };partial interface Document {ViewTransition startViewTransition (optional (ViewTransitionUpdateCallback or StartViewTransitionOptions )= {}); };callbackOptions
startViewTransition(callbackOptions)는 아래와
같습니다:
-
updateCallback을 null로 둡니다.
-
callbackOptions가
ViewTransitionUpdateCallback인 경우, updateCallback을 callbackOptions로 설정합니다. -
그 외에 callbackOptions가
StartViewTransitionOptions인 경우, updateCallback을 callbackOptions의update로 설정합니다. -
this의 active view transition이 null이 아니고, 그 outbound post-capture steps가 null이 아니라면,
-
preSkippedTransition을 this의 relevant realm에서
ViewTransition의 update callback로 updateCallback을 가진 새 객체로 둔다.참고: preSkippedTransition의
types값은 트랜지션이 활성화되지 않으므로 무시됩니다. -
Skip preSkippedTransition with "
InvalidStateError"DOMException으로 처리합니다. -
preSkippedTransition을 반환합니다.
참고: 이는
pageswap발생 후 시작된 동일 문서 트랜지션이 건너뛰어지도록 보장합니다. -
-
viewTransition을 method steps로
startViewTransition(updateCallback)에 updateCallback을 전달하여 실행한 결과로 둡니다. -
callbackOptions가
StartViewTransitionOptions인 경우, viewTransition의 active types를types의 clone으로 set으로 설정합니다. -
viewTransition을 반환합니다.
6. view-transition-name 자동 결정
6.1. 개요
이 섹션은 규범적이지 않습니다.
요소가 뷰 트랜지션에 참여하려면 고유한 view-transition-name을 받아야 합니다. 여러 요소가 동일 뷰 트랜지션에 관여하는 경우, 특히 많은 요소가 same-element 트랜지션(즉, 이전과 새 상태에서 view-transition-name이 동일)일 때, 이 작업은 번거롭고 장황할 수 있습니다.
이를 쉽게 하기 위해, view-transition-name을 auto로 설정하면, 요소에 대해 view-transition-name이 생성되거나, 해당 요소에 id가 있으면 그 값을 사용합니다.
6.2. 예시
< ul > < li > Item 1</ li > < li > Item 2</ li > < li > Item 3</ li > < li > Item 4</ li > ...</ ul >
일반적으로 각 항목마다 고유한 view-transition-name을 지정해야 합니다:
li : nth-child ( 1 ) { view-transition-name : item1; } li:nth-child ( 2 ) { view-transition-name : item1; } li:nth-child ( 3 ) { view-transition-name : item1; } li:nth-child ( 4 ) { view-transition-name : item1; } ...
auto를 사용하면 아래 CSS로 동작합니다:
li{ view-transition-name : auto; }
6.3. view-transition-name에 대한 추가 사항
기존 값 외에도, view-transition-name은 auto 키워드도 허용합니다. element에 대해 view-transition-name의 used value를 결정하는 과정은 다음과 같습니다:
-
computed를 computed value로 둡니다. view-transition-name의
-
computed가 none이면 null 반환
-
computed가 <custom-ident>이면 computed 반환
-
Assert: computed는 auto입니다.
-
element에 id가 있고, computed가 element의 root와 동일 루트에 연결된 경우, element의 id 값을 반환
-
고유 문자열을 반환. 이 문자열은 해당 요소와
Document에 대해 일관되고 고유해야 하며, 적어도 element의 node document의 active view transition 동안에는 유지되어야 합니다.참고: 이 문자열은 웹에서 관찰되지 않으며, 내부 알고리즘에서 요소를 식별하는 용도로 사용됩니다.
참고: 문서 간 뷰 트랜지션에서 사용할 경우, 생성된 auto 값은 절대 일치하지 않으므로, 각각의 ::view-transition-group() 의사 요소가 별도로 생성됩니다 (하나는 종료, 하나는 진입).
auto로 생성된 view-transition-name은 트리 범위 이름(tree-scoped name)입니다.
7. 중첩 뷰 트랜지션
7.1. 개요
이 섹션은 규범적이지 않습니다.
기본적으로 여러 요소에 view-transition-name을 지정하면 평면 뷰
트랜지션 트리가 생성되어, 모든 ::view-transition-group() 의사 요소가 ::view-transition 의사 요소의 자식이 됩니다.
이는 많은 단순한 사용 사례에서는 충분하지만, 평면 트리로는 구현이 어려운 스타일링 사례도 있습니다.
대표적인 사례는 클리핑입니다. 평면 트리에서는 모든 의사 요소가 스냅샷 포함 블록에 클리핑되어, 원래 트리에서 클리핑된 요소가 뷰 트랜지션 중에는 클리핑을 잃어 시각적 효과가 깨질 수
있습니다.
평면 트리에서 예상하지 못한 시각적 효과가 발생할 수 있는 경우:
-
클리핑(overflow, clip-path, border-radius): 클리핑은 해당 요소의 자식에게 영향을 줍니다.
-
opacity, mask-image 및 filter: 이러한 효과는 트리 전체가 래스터화된 이미지에 적용되도록 설계되어, 개별 항목에 적용하면 의도한 대로 동작하지 않습니다.
-
3D 변환(transform-style, transform, perspective): 3D 트랜스폼 애니메이션의 전체 효과를 보여주려면 계층 구조가 유지되어야 합니다.
이러한 사용 사례를 가능하게 하기 위해, 본 명세는 뷰 트랜지션 의사 요소의 중첩 개념을 도입합니다. view-transition-group CSS 속성을 사용하면, 저자가 생성된 ::view-transition-group() 의사 요소의 "부모 그룹"을 지정해 뷰 트랜지션 트리에 계층 구조를 만들 수 있습니다.
7.2. 예시
< section class = "container" > < article > Content</ article > </ section >
.container{ view-transition-name : container; } .container, ::view-transition-group ( container) { clip-path : circle (); } article{ view-transition-name : article; view-transition-group : container; }
컨테이너 요소와 해당 의사 요소 모두에 clip-path를 적용하면 트랜지션 중에도 클리핑이 유지되고, 내부 요소에 view-transition-group을 컨테이너로 지정하면 트리가 중첩되어 클리핑이 제대로 적용됩니다.