::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 Ansichtstransitions-Snapshot-Gruppe.
Während einer Ansichtstransition wird ::view-transition-group
in den zugehörigen Pseudo-Element-Baum eingeschlossen, wie im Abschnitt Der Pseudo-Element-Baum der Ansichtstransition erklärt. Es ist immer nur ein Kind von ::view-transition
und hat ein ::view-transition-image-pair
als Kind.
::view-transition-group
erhält folgende Standardstile 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
Pseudo-Elements wider, das den "alten" Ansichtsstatus darstellt, oder das ::view-transition-new
Pseudo-Element, das den "neuen" Ansichtsstatus darstellt, wenn kein "alter" Ansichtsstatus vorhanden ist.
Wenn es sowohl einen "alten" als auch einen "neuen" Ansichtsstatus gibt, animieren die Styles im Ansichtstransitions-Stylesheet die width
und height
dieses Pseudo-Elements von der Größe des Rahmenkastens des "alten" Ansichtsstatus zur Größe des Rahmenkastens des "neuen" Ansichtsstatus.
Hinweis: Die Ansichtstransitionsstile werden während der Ansichtstransition dynamisch generiert; siehe die Spezifikationsabschnitte Setup Transition Pseudo-Elements und Update Pseudo-Element Styles für weitere Details.
Zusätzlich wird die Transformation des Elements von der Bildschirmraumentransformation des "alten" Ansichtsstatus zur neuen Bildschirmraumentransformation des neuen Ansichtsstatus 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 einen der folgenden Werte annehmen:
*
-
Lässt das Pseudo-Element mit allen Ansichtstransitionsgruppen übereinstimmen.
root
-
Lässt das Pseudo-Element mit der standardmäßigen
root
-Ansichtstransitionsgruppe übereinstimmen, die vom Benutzeragenten erstellt wurde, um die Ansichtstransition für die gesamte Seite zu enthalten. Diese Gruppe umfasst alle Elemente, die keiner spezifischen Ansichtstransitionsgruppe über dieview-transition-name
Eigenschaft zugeordnet sind. <custom-ident>
-
Lässt das Pseudo-Element mit einer spezifischen Ansichtstransitionsgruppe übereinstimmen, die durch die Zuordnung des angegebenen
<custom-ident>
zu einem 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