::view-transition-image-new

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

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

Der Pseudo-Element ::view-transition-image-new ist ein Pseudo-Element in einem Baum von Pseudo-Elementen, den der Browser einrichtet, wenn eine Ansichtsübergang auf der Seite registriert wird. Der Pseudo-Element ::view-transition ist die „Wurzel“ des Baums, und ::view-transition-image-pair ist zwei Ebenen tief und im Pseudo-Element ::view-transition-group enthalten.

Und im ::view-transition-image-pair finden wir ::view-transition-image-new.

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

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 bezeichnet dies als das Pseudo-Element „View Transition New 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 dann zum neuen Zustand übergeht.

Syntax

::view-transition-image-new(<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 „neues“ Übergangsbild im Pseudo-Element-Baum ::view-transition auszuwählen. Wenn ein bestimmtes Element beispielsweise einen view-transition-name von gallery hat, würden Sie ::view-transition-image-new(gallery) verwenden, um diese Übergangsgruppe auszuwählen.
root: Dieser Wert entspricht :root::view-transition-new(*), einem vom Browser eingerichteten Selektor, der jedes „neue“ Ansichtsübergangsbild abgleicht, dem kein spezifischer Ansichtsübergang über die CSS-Eigenschaft view-transition-name zugewiesen wurde.
Universeller Selektor (*): Verwenden Sie dies, um *alle* „neuen“ Zustände eines Ansichtsübergangs auf einer Seite auszuwählen.

Standardstile

Die Spezifikation definiert die Standardstile, die Browser für ::view-transition-image-new 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-new(gallery) {
  animation-duration: 500ms;
}

Spezifikation

Das CSS-Pseudo-Element ::view-transition-image-new 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, sie wird jedoch 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.