::view-transition-image-pair

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das ::view-transition-image-pair CSS Pseudo-Element repräsentiert einen Container für die "alte" und "neue" Ansichtszustände eines Ansichtsübergangs — vor und nach dem Übergang.

Während eines Ansichtsübergangs wird ::view-transition-image-pair, wie im Abschnitt Der Pseudo-Element-Baum des Ansichtsübergangs erklärt, in den zugehörigen Pseudo-Element-Baum aufgenommen. Es ist immer nur ein Kind eines ::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 im UA-Stylesheet die folgende Standardformatierung:

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

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

Während eines Ansichtsübergangs hat ::view-transition-image-pair isolation: isolate in dem Stylesheet des Ansichtsübergangs, sodass seine Kinder mit nicht-normalen Mischmodi überlagert werden können, ohne andere visuelle Ausgaben zu beeinflussen.

Syntax

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

<pt-name-selector> kann einen der folgenden Werte haben:

*

Führt dazu, dass das Pseudo-Element mit allen Gruppen für Ansichtsübergänge übereinstimmt.

root

Führt dazu, dass das Pseudo-Element mit der Standard-root-Gruppe für Ansichtsübergänge übereinstimmt, die vom Benutzeragenten erstellt wurde, um den Ansichtsübergang für die gesamte Seite zu enthalten. Diese Gruppe enthält jedes Element, das nicht über die view-transition-name Eigenschaft einer eigenen spezifischen Gruppe für Ansichtsübergänge zugewiesen ist.

<custom-ident>

Führt dazu, dass das Pseudo-Element mit einer spezifischen Gruppe für Ansichtsübergänge übereinstimmt, die durch Zuweisen des gegebenen <custom-ident> zu einem Element über die view-transition-name Eigenschaft erstellt wurde.

Beispiele

css
::view-transition-image-pair(root) {
  isolation: auto;
}

Spezifikationen

Specification
CSS View Transitions Module Level 1
# ::view-transition-image-pair

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch