::view-transition-group()
Baseline
2025
Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Das ::view-transition-group() CSS Pseudo-Element repräsentiert eine einzelne View-Transition-Schnappschussgruppe.
Während einer Ansichtstransition wird ::view-transition-group() in den zugehörigen Baum der Pseudo-Elemente eingefügt, wie im Abschnitt Der Baum der View-Transition-Pseudo-Elemente erklärt. Es ist immer ein Kind von ::view-transition und hat ein ::view-transition-image-pair() als Kind.
Dem ::view-transition-group() wird im UA-Stylesheet folgendes Standardstyling zugewiesen:
: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() Pseudo-Elements wider, das den "alten" Ansichtsstatus repräsentiert, oder des ::view-transition-new() Pseudo-Elements, das den "neuen" Ansichtsstatus repräsentiert, falls kein "alter" Ansichtsstatus vorhanden ist.
Wenn sowohl ein "alter" als auch ein "neuer" Ansichtsstatus vorhanden ist, animiert das Stylesheet der Ansichtstransition die width und height dieses Pseudo-Elements von der Größe des Border-Box des "alten" Ansichtsstatus zur Größe des Border-Box des "neuen" Ansichtsstatus.
Hinweis: Die Stile für Ansichtstransitionen werden dynamisch während der Ansichtstransition generiert; siehe die Spezifikationsabschnitte setup transition pseudo-elements und update pseudo-element styles für weitere Details.
Zusätzlich wird die Transformation des Elements vom Bildschirmlage-Transform des "alten" Ansichtsstatus zum Bildschirmlage-Transform des neuen Ansichtsstatus animiert. Dieser Stil wird dynamisch generiert, da die Werte der animierten Eigenschaften zu dem Zeitpunkt bestimmt werden, an dem die Transition beginnt.
Syntax
::view-transition-group([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
/* ... */
}
Parameter
*-
Der universelle Selektor (
*); wählt alle Ansichtstransitionsgruppen auf einer Seite aus. root-
Der
view-transition-name, der auf:rootangewendet wird, führt dazu, dass das Pseudo-Element der Standard-root-Ansichtstransitionsgruppe entspricht. Dies ist die vom Benutzeragenten erstellte Schnappschussgruppe, die die Ansichtstransition für die gesamte Seite enthält. Diese Gruppe schließt jedes Element ein, das nicht über dieview-transition-nameEigenschaft seiner eigenen spezifischen Ansichtstransitionsschnappschussgruppe zugeordnet ist. <pt-name-selector>-
Der
<custom-ident>, der als Wert derview-transition-nameEigenschaft gesetzt ist. <pt-class-selector>-
Der
<custom-ident>, der als Wert derview-transition-classEigenschaft gesetzt ist, vorangestellt durch einen Punkt (.).
Die specificity des benannten Ansichtstransitions-Pseudo-Elements ist gleich der Specificity des Typ-Selektors, es sei denn, der verwendete Parameter ist der universelle Selektor, dann ist die Specificity null.
Beispiele
::view-transition-group(embed-container) {
animation-duration: 0.3s;
animation-timing-function: ease;
z-index: 1;
}
::view-transition-group(.card) {
animation-duration: 1s;
}
Spezifikationen
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-group |
Browser-Kompatibilität
Loading…