::view-transition-image-pair()

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:

: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

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

::view-transition-image-pair(root) {
 isolation: auto;
}
::view-transition-image-pair(.card) {
 isolation: isolate;
}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• View Transition API
• Sanfte Übergänge mit der View Transition API