::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 Schnappschussgruppe eines Ansichtswechsels.

Während eines Ansichtswechsels ist ::view-transition-group im zugehörigen Pseudo-Element-Baum enthalten, wie in Der Pseudoelement-Baum des Ansichtstransfers 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 die folgende Standardstilierung 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 anfänglich die Größe und Position des ::view-transition-old-Pseudo-Elements wider, das den "alten" Ansichtsstatus darstellt, oder des ::view-transition-new-Pseudo-Elements, das den "neuen" Ansichtsstatus darstellt, wenn kein "alter" Ansichtsstatus vorhanden ist.

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

Hinweis: Ansichtswechsels-Stile werden während des Ansichtswechsels dynamisch generiert; siehe die Spezifikationsabschnitte Einrichtung von Übergangs-Pseudo-Elementen und Aktualisieren der Stile von Pseudo-Elementen für mehr Details.

Darüber hinaus wird die transform-Eigenschaft des Elements von der Bildschirmraumtransformation des "alten" Ansichtsstatus zur Bildschirmraumtransformation des neuen Ansichtsstatus animiert. Dieser Stil wird dynamisch generiert, da die Werte der animierten Eigenschaften zum Zeitpunkt des Beginns des Übergangs bestimmt werden.

Syntax

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

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

*

Bewirkt, dass das Pseudo-Element mit allen Ansichtswechselgruppen übereinstimmt.

root

Bewirkt, dass das Pseudo-Element mit der Standard-root-Ansichtswechselgruppe übereinstimmt, die vom Benutzeragenten erstellt wird, um den Ansichtswechsel für die gesamte Seite zu enthalten. Diese Gruppe schließt alle Elemente ein, die keiner eigenen speziellen Ansichtswechselgruppe über die view-transition-name-Eigenschaft zugewiesen sind.

<custom-ident>

Bewirkt, dass das Pseudo-Element mit einer spezifischen Ansichtswechselgruppe übereinstimmt, die erstellt wird, indem das gegebene <custom-ident> einem Element durch die view-transition-name-Eigenschaft zugewiesen wird.

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