::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

関連情報