::view-transition-image-pair()
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-image-pair() CSS Pseudoelement repräsentiert einen Container für die "alte" und "neue" Ansichtszustände eines Ansichtstransfers — vor und nach dem Transfer.
Während eines Ansichtstransfers wird ::view-transition-image-pair() in den zugehörigen Pseudoelement-Baum eingefügt, wie in Der Pseudoelement-Baum des Ansichtstransfers erklärt. Es ist immer nur ein Kind von ::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 die folgende Standardstilgebung im UA-Stylesheet:
:root::view-transition-image-pair(*) {
position: absolute;
inset: 0;
animation-duration: inherit;
animation-fill-mode: inherit;
animation-delay: inherit;
}
Während eines Ansichtstransfers hat ::view-transition-image-pair() isolation: isolate im Ansichtstransfer-Stylesheet gesetzt, so dass seine Kinder mit nicht-normalen Mischmodi gemischt werden können, ohne andere visuelle Ausgaben zu beeinflussen.
Syntax
::view-transition-image-pair([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
/* ... */
}
Parameter
*-
Der Universalselektor (
*); wählt alle Ansichtstransfergruppen auf einer Seite aus. root-
Verursacht, dass das Pseudoelement der Standard-
root-Ansichtstransfersnapshot-Gruppe entspricht, die vom Benutzeragenten erstellt wird, um den Ansichtstransfer für die gesamte Seite zu enthalten. Diese Gruppe umfasst jedes Element, das nicht seiner eigenen spezifischen Ansichtstransfersnapshot-Gruppe über dieview-transition-name-Eigenschaft zugewiesen ist. <pt-name-selector>-
Der
<custom-ident>, der als Wert derview-transition-name-Eigenschaft festgelegt ist. <pt-class-selector>-
Der
<custom-ident>, der als Wert derview-transition-class-Eigenschaft festgelegt ist und dem ein Punkt (.) vorangestellt ist.
Beispiele
::view-transition-image-pair(root) {
isolation: auto;
}
::view-transition-image-pair(.card) {
isolation: isolate;
}
Spezifikationen
| Specification |
|---|
| CSS View Transitions Module Level 1 # ::view-transition-image-pair |
Browser-Kompatibilität
Loading…