::view-transition-image-pair

Das CSS-Pseudoelement ::view-transition-image-pair ist Teil der View Transitions API, mit dem wir die „Vorher-Nachher“-Snapshots in einem Ansichtsübergang auswählen können.

::view-transition-image-pair(root) {
  animation-duration: 1s;
}

Zur Verdeutlichung: ::view-transition-image-pair ist ein Pseudoelement in einem Baum von Pseudoelementen, den der Browser einrichtet, wenn eine View Transition auf der Seite registriert wird. Das Pseudoelement ::view-transition ist der „Stamm“ des Baumes, und ::view-transition-image-pair befindet sich zwei Ebenen darunter und ist im Pseudoelement ::view-transition-group enthalten.

::view-transition
├─ ::view-transition-group(name-1)
│  └─ ::view-transition-image-pair(name-1)
│     ├─ ::view-transition-old(name-1)
│     └─ ::view-transition-new(name-1)
├─ ::view-transition-group(name-2)
│  └─ ::view-transition-image-pair(name-2)
│     ├─ ::view-transition-old(name-2)
│     └─ ::view-transition-new(name-2)
│ /* and so one... */

Dies macht ::view-transition-image-pair zu einem Vorfahren von ::view-transition (dem Stamm) und zu einem direkten Kind von ::view-transition-group. ::view-transition-image-pair wiederum enthält zwei eigene Kind-Pseudoelemente

Diese beiden Pseudoelemente repräsentieren den „alten“ Zustand vor Beginn der View Transition und den „neuen“ Zustand, zu dem übergeblendet wird. ::view-transition-image-pair ist somit eine praktische Möglichkeit, beide Zustände gemeinsam auszuwählen und zu stylen.

Die Spezifikation nennt dies das Pseudoelement „View Transition Image Pair Isolation“, was bedeutet, dass es den alten und neuen Zustand einer View Transition mit isolation versieht. Mit anderen Worten, ::view-transition-image-pair ist standardmäßig auf isolation: isolate gesetzt. Dies erstellt einen Stacking Context, der es dem alten und neuen Zustand der View Transition ermöglicht, über allem anderen zu liegen, um zu verhindern, dass sie von anderen Elementen verdeckt werden.

Syntax

::view-transition-image-pair(<pt-name-selector>) {
  /* Styles */
}

Das Pseudoelement akzeptiert einen <pt-name-selector> in seinem Argument, was gleichbedeutend ist mit einem der folgenden:

<custom-ident>: Verwenden Sie dies, um ein bestimmtes Übergangsbildpaar im ::view-transition-Pseudobaum auszuwählen. Wenn ein bestimmtes Element beispielsweise einen view-transition-name von gallery hat, verwenden Sie ::view-transition-image-pair(gallery), um diese Übergangsgruppe auszuwählen.
root: Dieser Wert entspricht html::view-transition-image-pair(*), einem vom Browser eingerichteten Selektor, der auf jedes Übergangsbildpaar passt, das nicht über die CSS-Eigenschaft view-transition-name einer bestimmten Ansicht zugewiesen ist.
Universeller Selektor (*): Verwenden Sie diesen, um *alle* Übergangsbildpaare auf einer Seite auszuwählen.

Standardstile

Die Spezifikation definiert die Standardstile, die Browser für ::view-transition-image-pair festlegen, wie folgt:

:root::view-transition-image-pair(*) {
  position: absolute;
  inset: 0;

  animation-duration: inherit;
  animation-fill-mode: inherit;
}

Beachten Sie, dass die Standardstile mit dem universellen Selektor (*) alle Ansichtsübergänge ansprechen. Wir können diese überschreiben, indem wir einen bestimmten view-transition-name auswählen.

::view-transition-pair(gallery) {
  animation-duration: 500ms;
}

Spezifikation

Das CSS-Pseudoelement ::view-transition-image-pair ist in der Spezifikation CSS View Transitions Module Level 1 definiert. Die Spezifikation ist als Candidate Recommendation Snapshot gekennzeichnet, was bedeutet, dass sie breit geprüft wurde und dazu bestimmt ist, eine offizielle W3C Recommendation zu werden, aber sie wird noch in der Praxis getestet.

Die Spezifikation besagt weiter

Dieses Dokument soll eine W3C Recommendation werden; es wird mindestens bis zum 5. Dezember 2023 als Candidate Recommendation bleiben, um zusätzliches Feedback zu sammeln.

Dieses Datum ist zum Zeitpunkt der Erstellung dieses Textes verstrichen. Achten Sie daher auf den Status des Dokuments, wenn es zu einer empfohlenen Funktion wird.