::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 einer View-Transition — vor und nach der Transition.
Während einer View-Transition wird ::view-transition-image-pair
im zugehörigen Pseudo-Element-Baum eingebunden, wie es in Der Pseudo-Element-Baum der View-Transition erklärt wird. Es ist immer nur ein Kind von ::view-transition-group
. Bezüglich der Kinder kann es ein ::view-transition-new
oder ein ::view-transition-old
oder beides beinhalten.
::view-transition-image-pair
erhält im UA-Stylesheet die folgende Standard-Stilregel:
:root::view-transition-image-pair(*) {
position: absolute;
inset: 0;
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: inherit;
}
Während einer View-Transition hat ::view-transition-image-pair
isolation: isolate
in der View-Transition-Stylesheet-Regel gesetzt, damit die Kinder mit Nicht-Normalen Blend-Modi kombiniert 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:
*
-
Lässt das Pseudo-Element mit allen View-Transition-Gruppen übereinstimmen.
root
-
Lässt das Pseudo-Element mit der Standard-
root
-View-Transition-Gruppe übereinstimmen, die von der Benutzer-Agent erstellt wurde, um die View-Transition für die gesamte Seite zu enthalten. Diese Gruppe umfasst jedes Element, das keiner eigenen spezifischen View-Transition-Gruppe mittels derview-transition-name
-Eigenschaft zugewiesen wurde. <custom-ident>
-
Lässt das Pseudo-Element mit einer spezifischen View-Transition-Gruppe übereinstimmen, die durch Zuweisung des angegebenen
<custom-ident>
an ein Element mittels derview-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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
::view-transition-image-pair() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- See implementation notes.