::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 Pseudoelement repräsentiert einen Container für die "alten" und "neuen" Ansichts-Zustände eines Ansichtsübergangs — vor und nach dem Übergang.

Während eines Ansichtsübergangs wird ::view-transition-image-pair() in den zugehörigen Pseudoelement-Baum aufgenommen, wie in Der Pseudoelement-Baum des Ansichtsübergangs erklärt. Es ist nur ein Kind von ::view-transition-group(). Was Kinder betrifft, so kann es ein ::view-transition-new() oder ein ::view-transition-old(), oder beide haben.

::view-transition-image-pair() erhält das folgende Standardstyling im UA-Stylesheet:

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() in der Ansichtsübergangs-Stylesheet isolation: isolate gesetzt, sodass seine Kinder mit nicht normalen Mischmodi gemischt werden können, ohne andere visuelle Ausgaben zu beeinflussen.

Syntax

css

::view-transition-image-pair([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) {
  /* ... */
}

Parameter

*: Der universelle Selektor (*); wählt alle Ansichtsübergangsgruppen auf einer Seite aus.
root: Verursacht, dass das Pseudoelement der Standard root-Ansichtsübertragungsschnappschussgruppe entspricht, die vom Benutzeragenten erstellt wurde, um den Ansichtsübergang für die gesamte Seite zu enthalten. Diese Gruppe umfasst jedes Element, das nicht über die Eigenschaft view-transition-name einer eigenen spezifischen Ansichtsübertragungsschnappschussgruppe zugewiesen ist.
<pt-name-selector>: Das <custom-ident>, das als Wert der Eigenschaft view-transition-name festgelegt ist.
<pt-class-selector>: Das <custom-ident>, das als Wert der Eigenschaft view-transition-class festgelegt ist, eingeleitet durch einen Punkt (.).

Beispiele

css

::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