::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-group
はは、ビュー遷移プロセス で説明されているように、関連する擬似要素ツリーに含まれています。これは::view-transition
の唯一の子であり、::view-transition-image-pair
を子として持ちます。
::view-transition-group
は UA スタイルシートで以下の既定のスタイルを与えられています。
html::view-transition-group(*) {
position: absolute;
top: 0;
left: 0;
animation-duration: 0.25s;
animation-fill-mode: both;
}
既定では、選択された要素は、「古い}ビュー状態を表す ::view-transition-old
擬似要素、または「古い」ビュー状態がない場合は「新しい」ビュー状態を表す ::view-transition-new
擬似要素のサイズと位置を最初に反映します。
「古い」ビュー状態と「新しい」ビュー状態の両方がある場合、ビュー遷移スタイルシートのスタイルは、この擬似要素の width
と height
を「古い」ビュー状態の境界ボックスのサイズから「新しい」ビュー状態の境界ボックスのサイズにアニメーションさせます。
メモ: ビュー遷移スタイルシートのスタイルは、ビューのトランジション中に動的に生成されます。詳細については、仕様書のトランジション擬似要素の設定および擬似要素スタイルの更新の節を参照してください。
さらに、要素の変換は、「古い」ビュー状態の画面空間変換から新しいビュー状態の画面空間変換へアニメーションします。アニメーションしているプロパティの値はトランジションを始める時点に決定されるため、このスタイル設定は動的に生成されます。
構文
::view-transition-group(<pt-name-selector>) {
/* ... */
}
<pt-name-selector>
は以下の値のうちのいずれかです。
*
-
擬似要素が、すべてのビュー遷移グループに一致するようにします。
root
-
擬似要素が、ページ全体のビュー遷移を含むためにユーザーエージェントによって作成された既定の
root
ビュー遷移グループに一致するようにします。すなわち、view-transition-name
プロパティによって自分自身を固有のビュー遷移グループに割り当てていない要素を意味します)。 <custom-ident>
-
擬似要素が、指定された
<custom-ident>
をview-transition-name
プロパティを通して要素に割り当てることによって作成された固有のビュー遷移グループに一致するようにします。
例
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 |
ブラウザーの互換性
BCD tables only load in the browser