::view-transition-image-old

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

::view-transition-image-old(*) {
  animation-duration: 700ms;
}

Zur Verdeutlichung: ::view-transition-image-old ist ein Pseudo-Element in einem Baum von Pseudo-Elementen, den der Browser erstellt, wenn eine Ansichtsübergang (view transition) auf der Seite registriert wird. Das Pseudo-Element ::view-transition ist der „Wurzelknoten“ des Baums und ::view-transition-image-pair befindet sich zwei Ebenen tiefer, eingebettet im Pseudo-Element ::view-transition-group.

Und innerhalb von ::view-transition-image-pair finden wir ::view-transition-image-old

::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-old zu einem direkten Kind von ::view-transition-image-pair. Das Bildpaar enthält auch den „neuen“ Schnappschuss des Ansichtsübergangs, ::view-transition-image-new.

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 Pseudo-Element „View Transition Old State Image“, was ziemlich treffend ist, da es sich tatsächlich um ein Bild des Ansichtsübergangs handelt, das der Browser erfasst, bevor der Übergang ausgeführt wird, und das dann zum neuen Zustand übergeht.

Syntax

::view-transition-image-old(<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 „altes“ Übergangsbild im ::view-transition-Pseudo-Baum auszuwählen. Wenn ein bestimmtes Element beispielsweise einen view-transition-name von gallery hat, würden Sie ::view-transition-image-old(gallery) verwenden, um diese Übergangsgruppe auszuwählen.
• root: Dieser Wert entspricht :root::view-transition-old(*), einem vom Browser eingerichteten Selektor, der jedes „alte“ Bild eines Ansichtsübergangs auswählt, das nicht über die CSS-Eigenschaft view-transition-name einem bestimmten Ansichtsübergang zugewiesen wurde.
• Universalselektor (*): Verwenden Sie dies, um *alle* „alten“ Zustände eines Ansichtsübergangs auf einer Seite auszuwählen.

Standardstile

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

:root::view-transition-old(*),
:root::view-transition-new(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: 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-old(gallery) {
  animation-duration: 500ms;
}

Spezifikation

Das CSS-Pseudo-Element ::view-transition-image-old ist in der Spezifikation CSS View Transitions Module Level 1 definiert. Die Spezifikation ist als Candidate Recommendation Snapshot gekennzeichnet, was bedeutet, dass sie umfassend überprüft wurde und dazu bestimmt ist, eine offizielle W3C Recommendation zu werden, aber sie wird immer 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.

Browser-Unterstützung