::view-transition-new

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Das ::view-transition-new CSS Pseudoelement repräsentiert den "neuen" Ansichtsstatus eines View-Transitions — eine Schnappschuss-Live-Darstellung des Zustands nach der Transition.

Während einer View-Transition wird ::view-transition-new im zugehörigen Pseudoelement-Baum wie in Der Pseudoelement-Baum der View-Transition beschrieben, eingeschlossen. Es ist immer nur ein Kind von ::view-transition-image-pair und hat niemals eigene Kinder.

Es handelt sich um ein ersetztes Element und kann daher mit Eigenschaften wie object-fit und object-position manipuliert werden. Es hat natürliche Maße, die der Größe des Inhalts entsprechen.

Das folgende Standardstyling ist im UA-Stylesheet enthalten:

css
:root::view-transition-old(*),
:root::view-transition-new(*) {
  position: absolute;
  inset-block-start: 0;
  inline-size: 100%;
  block-size: auto;

  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
}

/* Keyframes for blending when there are 2 images */
@keyframes -ua-mix-blend-mode-plus-lighter {
  from {
    mix-blend-mode: plus-lighter;
  }
  to {
    mix-blend-mode: plus-lighter;
  }
}

@keyframes -ua-view-transition-fade-in {
  from {
    opacity: 0;
  }
}

Hinweis: Zusätzliche View-Transition-Stile werden ebenfalls eingerichtet, um ::view-transition-new zu animieren. Diese werden während der Ansichtstransition dynamisch generiert; siehe die Abschnitte Setup-Transition-Pseudoelemente und Update-Pseudoelement-Stile in der Spezifikation für weitere Details.

Syntax

css
::view-transition-new(<pt-name-selector>) {
  /* ... */
}

<pt-name-selector> kann einen der folgenden Werte annehmen:

*

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

root

Veranlasst, dass das Pseudoelement mit der Standard-root-View-Transition-Snapshot-Gruppe übereinstimmt, die vom Benutzeragenten erstellt wurde, um die Ansichtstransition für die gesamte Seite zu enthalten. Diese Gruppe umfasst jedes Element, dem keine spezifische eigene View-Transition-Snapshot-Gruppe über die view-transition-name-Eigenschaft zugewiesen wurde.

<custom-ident>

Veranlasst, dass das Pseudoelement mit einer spezifischen View-Transition-Snapshot-Gruppe übereinstimmt, die erstellt wurde, indem der gegebene <custom-ident> einem Element über die view-transition-name-Eigenschaft zugewiesen wurde.

Beispiele

css
figcaption {
  view-transition-name: figure-caption;
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-old(figure-caption),
::view-transition-new(figure-caption) {
  height: auto;
  right: 0;
  left: auto;
  transform-origin: right center;
}

::view-transition-old(figure-caption) {
  animation: 0.25s linear both shrink-x;
}

::view-transition-new(figure-caption) {
  animation: 0.25s 0.25s linear both grow-x;
}

Spezifikationen

Specification
CSS View Transitions Module Level 1
# ::view-transition-new

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
::view-transition-new()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.

Siehe auch