1. はじめに
このセクションは規範的ではありません。
[css-view-transitions-1]で定義されているView Transitionsは、開発者がdocumentの視覚的状態間でアニメーション付きの遷移を作成できる機能です。
レベル2は、同一オリジンかつクロスドキュメントナビゲーション間での遷移を可能にするためのAPIやライフサイクルを追加するほか、よりリッチなビュー遷移を作成しやすくするためのいくつかの拡張を含みます。
レベル2では以下を定義します:
-
クロスドキュメントビュー遷移（@view-transitionルールや、クロスドキュメントビュー遷移のライフサイクルを可能にするアルゴリズムを含む）
-
セレクティブビュー遷移（active view transitionの存在や、その種類に応じてスタイルをマッチさせる方法）
-
ビュー遷移疑似要素間でのスタイル共有（スタイルを一度宣言して複数のビュー遷移疑似要素に利用する方法。これにはview-transition-classプロパティや名前付き疑似要素への追加を含みます）
2. クロスドキュメントビュー遷移
2.1. 概要
このセクションは規範的ではありません。
2.1.1. アクティベーション
同一ドキュメントのビュー遷移では、作者はJavaScriptを使ってstartViewTransitionを呼び出すことでビュー遷移を開始します。
クロスドキュメントビュー遷移では、ビュー遷移をトリガーするのは2つのドキュメント間のナビゲーションですが、下記の条件がすべて満たされている必要があります:
-
両方のドキュメントが同一オリジンであること
-
ページがナビゲーションの全過程で可視状態であること
-
ユーザーがリンクをクリックする、フォームを送信するなどのページ上の操作、またはブラウザーUIによる
traverseナビゲーション（戻る/進む）を行うこと。URLバーによるナビゲーションなどは除外されます。 -
ナビゲーションにクロスオリジンリダイレクトが含まれていないこと
-
両方のドキュメントが@view-transitionルールを使ってクロスドキュメントビュー遷移にオプトインしていること
詳細はライフサイクルセクションを参照してください。
2.1.2. 新しい状態の安定化を待つ
同一ドキュメントのビュー遷移では、作者はstartViewTransitionに渡したコールバックで新しい状態が安定したことを示すことができます。
クロスドキュメントビュー遷移は宣言的なので、明示的なPromiseはありません。代わりにユーザーエージェントはレンダーブロッキング機構を利用して、ドキュメントが安定状態に達したかを判断します。
この方法で、作者はblocking属性を使い、下記のいずれかで遷移を遅延させることができます:
-
必要なスクリプトに
blocking属性を付けて、想定されるスクリプトがすべて実行されるまで待つ -
必要なスタイルやリンクに
blocking属性を付けて、想定されるスタイルがすべて適用されるまで待つ -
パーサによって期待されるHTML要素がすべて検出されるまで、
expectHTMLLinkElement要素を使う
注: レンダーブロッキング機構を過剰に使うと、古い状態が長時間フリーズし、ユーザー体験が悪化する場合があります。 これを避けるため、レンダーブロッキング要素は速やかに利用可能となるようにしてください。
この例では、旧ドキュメントの最後のフレームが表示され、下記のすべての条件が満たされるまでアニメーションが遅延されます:
-
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
オブジェクト1つを使用します。
クロスドキュメントビュー遷移では、旧ドキュメントと新ドキュメントにそれぞれViewTransition
オブジェクトが存在します。
2.1.3.1. 旧ドキュメントでのビュー遷移の処理
pageswap
イベントは、ドキュメントがアンロードされて他のドキュメントにスワップされる直前の最後の瞬間に発火します。
このイベントを使ってビュー遷移が行われるかどうかの判定、typesによるカスタマイズ、
キャプチャ対象要素の直前変更、不要な場合のスキップなどが可能です。
PageSwapEvent
インターフェースには、ナビゲーションがビュー遷移の対象となる場合に非nullとなるviewTransition
オブジェクトと、リダイレクト後のURLなどナビゲーション情報を持つactivation
オブジェクトがあります。
遷移のfinished
promiseは、後でドキュメントがBFCacheから復元された場合の後始末などに利用できます。
2.1.3.2. 新ドキュメントでのビュー遷移の処理
pagereveal
イベントは、新しいドキュメントの最初のフレームが表示される直前に発火します。
このイベントを使い、viewTransition
属性を参照してビュー遷移が有効かを確認できます。
同一ドキュメントビュー遷移と同様に、作者はtypesで異なる遷移を選択したり、
キャプチャ要素の直前変更、ready
待機によるアニメーション開始、または遷移そのもののスキップが可能です。
2.1.4. ライフサイクル
このセクションは規範的ではありません。
クロスドキュメントビュー遷移が正常に行われる場合、以下の段階を経て進行します:
-
旧
Document側で:-
ユーザーがリンククリック、フォーム送信、ブラウザの戻るボタンなどでナビゲーションを開始する。
注: 一部のナビゲーション（例えばURLバーに新しいアドレスを入力）はビュー遷移をトリガーしません。
-
ナビゲーションが同一オリジンで、 クロスオリジンリダイレクトがなく、旧
Documentがクロスドキュメントビュー遷移にオプトインしている場合、このイベントのviewTransition属性はViewTransitionオブジェクトとなります。 -
ViewTransitionがスキップされない場合、旧ドキュメントの状態がキャプチャされます。
-
-
続いて、新しい
Document側で:-
新しい
Documentが最初のレンダリング機会を迎えると、pagerevealイベントが新しいDocumentで発火し、viewTransition属性が渡されます。 -
この
ViewTransitionのupdateCallbackDoneDocumentから引き継がれます。 -
新しいドキュメントの状態がキャプチャされ、「新しい」状態として遷移に利用されます。
-
この時点以降、遷移はビュー遷移のアクティベーションに従い、同一ドキュメント遷移と同様の流れで進行します。
-
2.2. 例
代わりに、ページ1とページ2の両方でナビゲーション時のview-transitionにオプトインします:
// 両方のドキュメントで:
@view-transition {
navigation : auto;
}
ページ1からページ2、またはその逆へのリンクは、例1のクロスフェード遷移を生成します。 例2、3、4の効果を得るには、両方のドキュメントに疑似要素用のCSSを記述してください。
@view-transition { navigation : auto; } @media ( max-width:600 px ) { navigation : none; }
-
両方のページでナビゲーションによるview-transitionにオプトインする。
-
クリック位置を新しいドキュメントに渡す（例:
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 ; // 戻る/進むナビゲーションでview transitionをしたくない場合... 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" ); // view transitionが終わるまでサムネイルを表示 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で変更された場合、ユーザーエージェントはdocumentに対して
アウトバウンド遷移のオプトイン状態を更新しなければなりません。
注: この結果はナビゲーション時に並列で参照される必要があるため、ブール値としてキャッシュする必要があります。
2.3.2. navigation記述子
| 名前: | navigation |
|---|---|
| 対象: | @view-transition |
| 値: | auto | none |
| 初期値: | none |
'navigation'記述子は、特定の種類のナビゲーション時に自動的にビュー遷移を開始するためのオプトインです。 旧ドキュメント・新ドキュメント両方に記述されている必要があります。
- none
-
遷移は発生しません。
- auto
-
ナビゲーションが同一オリジンであり、クロスオリジンリダイレクトがなく、かつ
NavigationTypeが次のいずれかの場合に遷移が有効になります：-
pushまたはreplaceで、ユーザーのナビゲーション関与が"browser UI"以外の場合。
注: autoから除外されるナビゲーションには、URLアドレスバーによる遷移、ブックマーククリック、
reloadを使ったユーザーやスクリプトによる全てのリロードが含まれます。
このatルールはCSSの前方互換パース要件に従います。 準拠パーサーがこれらのルールを理解しない場合でも、エラーなく無視されます。 未認識・未実装の記述子、またはここや将来仕様で定義される文法と一致しない値を持つ記述子は全て無視されます。 それらは@view-transitionルール自体を無効化しません。
2.3.3. @view-transitionルールのCSSOMによるアクセス
CSSViewTransitionRule
は@view-transitionルールを表します。
[Exposed =Window ]interface :CSSViewTransitionRule CSSRule {readonly attribute CSSOMString ; [navigation SameObject ]readonly attribute FrozenArray <CSSOMString >; };types
navigation
のgetterは、対応するnavigation記述子が存在すればその値を、なければ空文字列を返します。
types
のgetterは、対応するtypes記述子が存在すればその値を、なければ空のリストを返します。
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()は、 セレクター内の型がactive view transitionのactive typesと一致する場合に document elementにマッチします。
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が存在する場合に有効です。
:active-view-transitionの特異性は、1つの疑似クラスセレクターです。
:active-view-transition疑似クラスは、document elementのノードドキュメントに、非nullのactive view transitionが存在する場合にマッチします。
3.3.2. :active-view-transition-type()疑似クラス
:active-view-transition-type()疑似クラスは、ドキュメントのルート要素に対して、該当するactive view transitionがある場合に適用されます。 構文は以下の通りです：
:active-view-transition-type(<custom-ident>#)
:active-view-transition-type()の特異性は、1つの疑似クラスセレクターです。
:active-view-transition-type()疑似クラスは、document elementのノードドキュメントに、非nullのactive view transitionが存在し、そのactive typesが、セレクター引数で指定したいずれかの<custom-ident>を含む場合にマッチします。
3.4. 進行中のビュー遷移の型を変更する
ViewTransition
インターフェースは以下のように拡張されます：
[Exposed =Window ]interface {ViewTransitionTypeSet setlike <DOMString >; }; [Exposed =Window ]partial interface ViewTransition {attribute ViewTransitionTypeSet ; };types
ViewTransitionTypeSet
オブジェクトは、特別な意味を持たない文字列のセットを表します。
注: ViewTransitionTypeSet
には、:active-view-transition-typeとして無効な文字列（例えば、<custom-ident>でないもの）も含まれる場合があります。
types
のgetterの処理は、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のclassに相当する機能をビュー遷移に提供します。 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 |
| 適用対象: | すべての要素 |
| 継承: | no |
| パーセンテージ: | n/a |
| 算出値: | 記述通り |
| 正規順序: | 文法通り |
| アニメーション型: | 離散 |
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>と組み合わせても無効です。
各「ビュー遷移クラス」はツリースコープ名です。
注: もし同じ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>]+
上記の文法を解釈する際、空白は以下では禁止されます：
名前付きビュー遷移疑似要素selectorが、 <custom-ident>値を1つ以上 <pt-class-selector>に持つ場合、 疑似要素のview-transition-nameに対応するclass list値が それらすべての値を含む場合のみ一致します。
特異性は、以下のいずれかを持つ名前付きビュー遷移疑似要素selectorについて：
-
<pt-class-selector>が1つ以上の<custom-ident>を持つ場合
これは型セレクターに相当します。
引数に*があり、 <pt-class-selector>が空の場合、 特異性はゼロです。
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（エラーコード "
InvalidStateError"DOMException）。 -
preSkippedTransitionを返す。
注: これは、
pageswap発火後に開始された同一ドキュメント遷移がスキップされることを保証します。 -
-
viewTransitionを、メソッド手順で
startViewTransition(updateCallback)（引数updateCallback）を実行した結果とする。 -
callbackOptionsが
StartViewTransitionOptionsの場合、 viewTransitionのactive typesにtypesのクローンを セットとして設定する。 -
viewTransitionを返す。
6. view-transition-nameの自動決定
6.1. 概要
このセクションは規範的ではありません。
要素がビュー遷移に参加するには、固有のview-transition-nameを受け取る必要があります。 多くの要素が同じビュー遷移に関与する場合、とくに同一要素遷移（旧状態・新状態で同じ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キーワードも指定できます。 view-transition-nameの使用値をelementに解決するには：
-
computedを算出値（ view-transition-name）とする。
-
computedがnoneならnullを返す。
-
computedが<custom-ident>ならcomputedを返す。
-
Assert: computedはautoである。
-
elementに関連付けられたidがあり、 computedがelementのrootと同じrootに関連付けられている場合、elementのidの値を返す。
-
一意な文字列を返す。この文字列は、elementと
Documentについて 少なくともelementのノードドキュメントの active view transitionのライフタイム内で一貫性・一意性を保つべきです。注: この文字列はウェブから観測できず、内部アルゴリズムで要素を識別するために使用されます。
注: クロスドキュメントビュー遷移で使われる場合、生成されたauto値は一致しないため、 ::view-transition-group()疑似要素が 1つは退出用、1つは入場用として分かれて生成されます。
autoで生成されたview-transition-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; }
container要素およびその生成疑似要素の両方にclip-pathを適用することで、 遷移中もクリッピングを維持できます。 内部要素にview-transition-groupをcontainer参照で指定することで、 ツリーが「ネスト」され、クリッピングが適用されます。