::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 Pseudoelement stellt eine einzelne View-Transition-Snapshot-Gruppe dar.

Während einer View-Transition ist ::view-transition-group in dem zugehörigen Pseudoelement-Baum enthalten, wie in Der View-Transition-Pseudoelement-Baum erläutert. 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 Standard-Stilgebung 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-Pseudoelements wider, das den "alten" View-Zustand darstellt, oder des ::view-transition-new-Pseudoelements, das den "neuen" View-Zustand darstellt, falls kein "alter" View-Zustand vorhanden ist.

Falls sowohl ein "alter" als auch ein "neuer" View-Zustand vorhanden sind, animieren die Stile im View-Transition-Stylesheet das width und height dieses Pseudoelements von der Größe des Border-Box des "alten" View-Zustands zu der des "neuen" View-Zustands.

Hinweis: View-Transition-Stile werden während der View-Transition dynamisch erzeugt; sehen Sie die Abschnitte Einrichten von Transition-Pseudoelementen und Aktualisieren von Pseudoelement-Stilen in der Spezifikation für weitere Details.

Zusätzlich wird die Transformation des Elements vom Bildschirmraum-Transformationszustand des "alten" Views zum neuen Bildschirmraum-Transformationszustand des neuen Views animiert. Dieser Stil wird dynamisch erzeugt, da die Werte der animierten Eigenschaften zum Zeitpunkt des Beginns der Transition bestimmt werden.

Syntax

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

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

*

Veranlasst, dass das Pseudoelement alle View-Transition-Gruppen abgleicht.

root

Veranlasst, dass das Pseudoelement die standardmäßige root-View-Transition-Gruppe abgleicht, die vom Benutzeragenten erstellt wurde, um die View-Transition für die gesamte Seite zu enthalten. Diese Gruppe schließt alle Elemente ein, die nicht über die view-transition-name-Eigenschaft einer eigenen spezifischen View-Transition-Gruppe zugewiesen sind.

<custom-ident>

Veranlasst, dass das Pseudoelement eine spezifische View-Transition-Gruppe abgleicht, die durch Zuweisung des gegebenen <custom-ident> an ein 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