::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 View-Übergangs-Snapshot-Gruppe.

Während eines View-Übergangs wird ::view-transition-group() in den zugehörigen Pseudo-Element-Baum aufgenommen, wie im Abschnitt Der View-Übergangs-Pseudo-Element-Baum erklärt. Es ist immer ein Kind von ::view-transition und hat ein ::view-transition-image-pair() als Kind.

::view-transition-group() erhält die folgende Standardformatierung im UA-Stylesheet:

css

:root::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 repräsentiert, oder des ::view-transition-new() Pseudo-Elements, das den "neuen" Ansichtsstatus repräsentiert, falls kein "alter" Ansichtsstatus vorhanden ist.

Wenn sowohl ein "alter" als auch ein "neuer" Ansichtsstatus vorhanden sind, animieren Stile im View-Übergangs-Stylesheet die width und height dieses Pseudo-Elements von der Größe des Rahmenfeldes des "alten" Ansichtsstatus auf die des Rahmenfeldes des "neuen" Ansichtsstatus.

Hinweis: View-Übergangsstile werden während des View-Übergangs dynamisch generiert; siehe die Spezifikationsabschnitte Übergangs-Pseudo-Elemente einrichten und Pseudo-Element-Stile aktualisieren für mehr Details.

Zusätzlich wird die Transformation des Elements vom Bildschirmraum-Transformationszustand des "alten" Ansichtsstatus zum neuen Bildschirmraum-Transformationszustand animiert. Dieser Stil wird dynamisch generiert, da die Werte der animierten Eigenschaften zu Beginn des Übergangs festgelegt werden.

Syntax

css

::view-transition-group([  ? ] | ) {
  /* ... */
}

Parameter

*: Der universelle Selektor (*); wählt alle View-Übergangsgruppen auf einer Seite aus.
root: Der view-transition-name angewandt auf :root bewirkt, dass das Pseudo-Element der Standard-root-View-Übergangsgruppe entspricht. Dies ist die vom User-Agent erstellte Snapshot-Gruppe, um den View-Übergang für die gesamte Seite zu enthalten. Diese Gruppe umfasst jedes Element, das nicht über die view-transition-name-Eigenschaft einer eigenen spezifischen View-Übergangs-Snapshot-Gruppe zugewiesen ist.
: Der , der als Wert der view-transition-name-Eigenschaft festgelegt wurde.
: Der , der als Wert der view-transition-class-Eigenschaft festgelegt wurde, vorangestellt durch einen Punkt (.).

Die specificity des benannten View-Übergangs-Pseudo-Elements entspricht der Specificity des Typselektors, es sei denn, der verwendete Parameter ist der universelle Selektor, in diesem Fall beträgt die Specificity null.

Beispiele

css

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

::view-transition-group(.card) {
  animation-duration: 1s;
}

Spezifikationen

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