::view-transition-group

Limited availability

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

Der ::view-transition-group CSS Pseudoelement repräsentiert eine einzelne Sichtübergang-Snapshot-Gruppe.

Während eines Sichtübergangs ist ::view-transition-group wie im Abschnitt Der Sichtübergangs-Pseudoelement-Baum erklärt, im zugehörigen Pseudoelement-Baum enthalten. Es ist nur je Kind von ::view-transition und hat ein ::view-transition-image-pair als Kind.

::view-transition-group erhält das folgende Standardstyling 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 Pseudoelements wider, das den "alten" Sichtzustand repräsentiert, oder des ::view-transition-new Pseudoelements, wenn es keinen "alten" Sichtzustand gibt.

Wenn sowohl ein "alter" als auch ein "neuer" Sichtzustand vorliegen, animieren die Stile im Sichtübergangs-Stylesheet dieses Pseudoelement von der Größe des Begrenzungsrahmens des "alten" Sichtzustands zu dem des "neuen" Sichtzustands in Bezug auf width und height.

Hinweis: Sichtübergangsstile werden während des Sichtübergangs dynamisch generiert; siehe die Spezifikationsabschnitte Übergangspseudoelemente einrichten und Pseudoelementstile aktualisieren für mehr Details.

Darüber hinaus wird die Transformation des Elements vom "alten" Sichtzustands-Bildschirmraum transformiert zu der des neuen Sichtzustands-Bildschirmraums 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 haben:

*

Verursacht, dass das Pseudoelement alle Sichtübergangsgruppen abgleicht.

root

Verursacht, dass das Pseudoelement die Standard-root-Sichtübergangsgruppe abgleicht, die vom Benutzeragenten zur Aufnahme des Sichtübergangs für die gesamte Seite erstellt wurde. Diese Gruppe umfasst jedes Element, dem über die view-transition-name Eigenschaft keine eigene spezifische Sichtübergangsgruppe zugewiesen ist.

<custom-ident>

Verursacht, dass das Pseudoelement eine spezifische Sichtübergangsgruppe abgleicht, die erstellt wird, indem das gegebene <custom-ident> einem Element über 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

Siehe auch