::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 "alten" und "neuen" Ansichtsstatus eines View-Transitions — vor und nach der Transition.

Während einer View-Transition wird ::view-transition-image-pair() im zugehörigen Pseudo-Element-Baum eingeschlossen, wie in Der View-Transition-Pseudo-Element-Baum erklärt. Es ist immer nur ein Kind von ::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 das folgende Standard-Styling 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 einer View-Transition hat ::view-transition-image-pair() isolation: isolate in der View-Transition-Stylesheet gesetzt, damit seine Kinder mit nicht-normalen Blendmodi 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 Universalselektor (*); wählt alle View-Transition-Gruppen auf einer Seite aus.
root: Veranlasst das Pseudo-Element, der Standard-root-View-Transition-Snapshot-Gruppe zu entsprechen, die vom User-Agent erstellt wurde, um die View-Transition für die gesamte Seite zu enthalten. Diese Gruppe schließt jedes Element ein, das nicht über die view-transition-name-Eigenschaft seiner eigenen spezifischen View-Transition-Snapshot-Gruppe zugewiesen wurde.
<pt-name-selector>: Der <custom-ident>, der als Wert der view-transition-name-Eigenschaft festgelegt ist.
<pt-class-selector>: Der <custom-ident>, der als Wert der view-transition-class-Eigenschaft festgelegt ist, gefolgt von einem 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