::view-transition-image-pair
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Das ::view-transition-image-pair
CSS Pseudo-Element repräsentiert einen Container für die "alte" und "neue" Ansichtszustände eines Ansichtsübergangs — vor und nach dem Übergang.
Während eines Ansichtsübergangs wird ::view-transition-image-pair
, wie im Abschnitt Der Pseudo-Element-Baum des Ansichtsübergangs erklärt, in den zugehörigen Pseudo-Element-Baum aufgenommen. Es ist immer nur ein Kind eines ::view-transition-group
. In Bezug auf Kinder kann es ein ::view-transition-new
oder ein ::view-transition-old
, oder beides, haben.
::view-transition-image-pair
erhält im UA-Stylesheet die folgende Standardformatierung:
:root::view-transition-image-pair(*) {
position: absolute;
inset: 0;
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: inherit;
}
Während eines Ansichtsübergangs hat ::view-transition-image-pair
isolation: isolate
in dem Stylesheet des Ansichtsübergangs, sodass seine Kinder mit nicht-normalen Mischmodi überlagert werden können, ohne andere visuelle Ausgaben zu beeinflussen.
Syntax
::view-transition-image-pair(<pt-name-selector>) {
/* ... */
}
<pt-name-selector>
kann einen der folgenden Werte haben:
*
-
Führt dazu, dass das Pseudo-Element mit allen Gruppen für Ansichtsübergänge übereinstimmt.
root
-
Führt dazu, dass das Pseudo-Element mit der Standard-
root
-Gruppe für Ansichtsübergänge übereinstimmt, die vom Benutzeragenten erstellt wurde, um den Ansichtsübergang für die gesamte Seite zu enthalten. Diese Gruppe enthält jedes Element, das nicht über dieview-transition-name
Eigenschaft einer eigenen spezifischen Gruppe für Ansichtsübergänge zugewiesen ist. <custom-ident>
-
Führt dazu, dass das Pseudo-Element mit einer spezifischen Gruppe für Ansichtsübergänge übereinstimmt, die durch Zuweisen des gegebenen
<custom-ident>
zu einem Element über dieview-transition-name
Eigenschaft erstellt wurde.
Beispiele
::view-transition-image-pair(root) {
isolation: auto;
}
Spezifikationen
Specification |
---|
CSS View Transitions Module Level 1 # ::view-transition-image-pair |
Browser-Kompatibilität
BCD tables only load in the browser