::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 "alte" und "neue" Ansichtszustände eines View-Transitions — vor und nach der Transition.

Während einer View-Transition ist ::view-transition-image-pair im zugehörigen Pseudoelement-Baum enthalten, wie in Der Pseudoelement-Baum der View-Transition erklärt. Es ist immer nur ein Kind eines ::view-transition-group. In Bezug auf die Kinder kann es ein ::view-transition-new oder ein ::view-transition-old oder beides haben.

::view-transition-image-pair hat die folgende Standardformatierung 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 im View-Transition-Stylesheet eingestellt, 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-name-selector> kann einen der folgenden Werte annehmen:

*

Verursacht, dass das Pseudoelement mit allen View-Transition-Gruppen übereinstimmt.

root

Verursacht, dass das Pseudoelement mit der Standard-root-View-Transition-Gruppe übereinstimmt, die vom Benutzeragenten erstellt wurde, um die View-Transition für die gesamte Seite zu enthalten. Diese Gruppe umfasst jedes Element, das nicht über die Eigenschaft view-transition-name seiner eigenen spezifischen View-Transition-Gruppe zugewiesen ist.

<custom-ident>

Verursacht, dass das Pseudoelement mit einer spezifischen View-Transition-Gruppe übereinstimmt, die erstellt wurde, indem das gegebene <custom-ident> über die Eigenschaft view-transition-name einem Element zugeordnet 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