::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:
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
::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 dieview-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 dieview-transition-name
-Eigenschaft zugewiesen wurde.
Beispiele
::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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::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.