::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 einer View-Transition — vor und nach der Transition.

Während einer View-Transition wird ::view-transition-image-pair im zugehörigen Pseudo-Element-Baum eingebunden, wie es in Der Pseudo-Element-Baum der View-Transition erklärt wird. Es ist immer nur ein Kind von ::view-transition-group. Bezüglich der Kinder kann es ein ::view-transition-new oder ein ::view-transition-old oder beides beinhalten.

::view-transition-image-pair erhält im UA-Stylesheet die folgende Standard-Stilregel:

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-Regel gesetzt, damit die Kinder mit Nicht-Normalen Blend-Modi kombiniert 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:

*

Lässt das Pseudo-Element mit allen View-Transition-Gruppen übereinstimmen.

root

Lässt das Pseudo-Element mit der Standard-root-View-Transition-Gruppe übereinstimmen, die von der Benutzer-Agent erstellt wurde, um die View-Transition für die gesamte Seite zu enthalten. Diese Gruppe umfasst jedes Element, das keiner eigenen spezifischen View-Transition-Gruppe mittels der view-transition-name-Eigenschaft zugewiesen wurde.

<custom-ident>

Lässt das Pseudo-Element mit einer spezifischen View-Transition-Gruppe übereinstimmen, die durch Zuweisung des angegebenen <custom-ident> an ein Element mittels der 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