::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-Transition-Snapshot-Gruppe.

Während einer View-Transition wird ::view-transition-group in den zugehörigen Pseudo-Element-Baum eingeschlossen, wie in Der View-Transition-Pseudo-Element-Baum beschrieben. Es ist immer ein Kind von ::view-transition und hat ein ::view-transition-image-pair als Kind.

Das folgende Standardstyling wird im UA-Stylesheet für ::view-transition-group angegeben:

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

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

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

Falls es sowohl einen "alten" als auch einen "neuen" View-Zustand gibt, animieren die Stile im View-Transition-Stylesheet die width und height dieses Pseudo-Elements von der Größe der Rahmenbox des "alten" View-Zustands zur der des "neuen" View-Zustands.

Hinweis: View-Transition-Stile werden dynamisch während der View-Transition generiert; Details dazu finden Sie in den Spezifikationsabschnitten Setup transition pseudo-elements und Update pseudo-element styles.

Zusätzlich wird die Transformation des Elements vom Screen-Space-Transform des "alten" View-Zustands zum Screen-Space-Transform des neuen View-Zustands 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 einer der folgenden Werte haben:

*

Bewirkt, dass das Pseudo-Element mit allen View-Transition-Gruppen übereinstimmt.

root

Bewirkt, dass das Pseudo-Element mit der standardmäßigen root-View-Transition-Gruppe übereinstimmt, die vom User-Agent erstellt wird, um die View-Transition für die gesamte Seite zu enthalten. Diese Gruppe umfasst jedes Element, das keiner spezifischen View-Transition-Gruppe über die view-transition-name-Eigenschaft zugewiesen wurde.

<custom-ident>

Bewirkt, dass das Pseudo-Element mit einer spezifischen View-Transition-Gruppe übereinstimmt, die erstellt wurde, indem der entsprechende <custom-ident> einem Element über die view-transition-name-Eigenschaft zugewiesen 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::view-transition-group()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch