Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
::view-transition-image-pair()
Baseline 2025Newly 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()CSSPseudoelement repräsentiert einen Container für die "alte" und "neue" Ansichtszustände einesAnsichtstransfers — vor und nach dem Transfer.
Während eines Ansichtstransfers wird::view-transition-image-pair() in den zugehörigen Pseudoelement-Baum eingefügt, wie inDer 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
*DerUniversalselektor (
*); wählt alle Ansichtstransfergruppen auf einer Seite aus.rootVerursacht, 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 |