::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 スタイルシートで以下の既定のスタイルを与えられています。

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 擬似要素のサイズと位置を最初に反映します。

「古い」ビュー状態と「新しい」ビュー状態の両方がある場合、ビュー遷移スタイルシートのスタイルは、この擬似要素の width と height を「古い」ビュー状態の境界ボックスのサイズから「新しい」ビュー状態の境界ボックスのサイズにアニメーションさせます。

メモ: ビュー遷移スタイルシートのスタイルは、ビューのトランジション中に動的に生成されます。詳細については、仕様書のトランジション擬似要素の設定および擬似要素スタイルの更新の節を参照してください。

さらに、要素の変換は、「古い」ビュー状態の画面空間変換から新しいビュー状態の画面空間変換へアニメーションします。アニメーションしているプロパティの値はトランジションを始める時点に決定されるため、このスタイル設定は動的に生成されます。

構文

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

<pt-name-selector> は以下の値のうちのいずれかです。

*

擬似要素が、すべてのビュー遷移グループに一致するようにします。

root

擬似要素が、ページ全体のビュー遷移を含むためにユーザーエージェントによって作成された既定の root ビュー遷移グループに一致するようにします。すなわち、 view-transition-name プロパティによって自分自身を固有のビュー遷移グループに割り当てていない要素を意味します）。

<custom-ident>

擬似要素が、指定された <custom-ident> を view-transition-name プロパティを通して要素に割り当てることによって作成された固有のビュー遷移グループに一致するようにします。

例

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

ブラウザーの互換性

BCD tables only load in the browser

関連情報