::view-transition-group

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das ::view-transition-group CSS Pseudo-Element repräsentiert eine einzelne Ansichtstransitions-Snapshot-Gruppe.

Während einer Ansichtstransition wird ::view-transition-group in den zugehörigen Pseudo-Element-Baum eingeschlossen, wie im Abschnitt Der Pseudo-Element-Baum der Ansichtstransition erklärt. Es ist immer nur ein Kind von ::view-transition und hat ein ::view-transition-image-pair als Kind.

::view-transition-group erhält folgende Standardstile im UA-Stylesheet:

css
html::view-transition-group(*) {
  position: absolute;
  top: 0;
  left: 0;

  animation-duration: 0.25s;
  animation-fill-mode: both;
}

Standardmäßig spiegeln ausgewählte Elemente zunächst die Größe und Position des ::view-transition-old Pseudo-Elements wider, das den "alten" Ansichtsstatus darstellt, oder das ::view-transition-new Pseudo-Element, das den "neuen" Ansichtsstatus darstellt, wenn kein "alter" Ansichtsstatus vorhanden ist.

Wenn es sowohl einen "alten" als auch einen "neuen" Ansichtsstatus gibt, animieren die Styles im Ansichtstransitions-Stylesheet die width und height dieses Pseudo-Elements von der Größe des Rahmenkastens des "alten" Ansichtsstatus zur Größe des Rahmenkastens des "neuen" Ansichtsstatus.

Hinweis: Die Ansichtstransitionsstile werden während der Ansichtstransition dynamisch generiert; siehe die Spezifikationsabschnitte Setup Transition Pseudo-Elements und Update Pseudo-Element Styles für weitere Details.

Zusätzlich wird die Transformation des Elements von der Bildschirmraumentransformation des "alten" Ansichtsstatus zur neuen Bildschirmraumentransformation des neuen Ansichtsstatus animiert. Dieser Stil wird dynamisch generiert, da die Werte der animierten Eigenschaften zu Beginn der Transition bestimmt werden.

Syntax

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

<pt-name-selector> kann einen der folgenden Werte annehmen:

*

Lässt das Pseudo-Element mit allen Ansichtstransitionsgruppen übereinstimmen.

root

Lässt das Pseudo-Element mit der standardmäßigen root-Ansichtstransitionsgruppe übereinstimmen, die vom Benutzeragenten erstellt wurde, um die Ansichtstransition für die gesamte Seite zu enthalten. Diese Gruppe umfasst alle Elemente, die keiner spezifischen Ansichtstransitionsgruppe über die view-transition-name Eigenschaft zugeordnet sind.

<custom-ident>

Lässt das Pseudo-Element mit einer spezifischen Ansichtstransitionsgruppe übereinstimmen, die durch die Zuordnung des angegebenen <custom-ident> zu einem Element über die view-transition-name Eigenschaft erstellt wurde.

Beispiele

css
::view-transition-group(embed-container) {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  z-index: 1;
}

Spezifikationen

Specification
CSS View Transitions Module Level 1
# ::view-transition-group

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch