::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:
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
::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 dieview-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 dieview-transition-name
-Eigenschaft erstellt 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
BCD tables only load in the browser