::view-transition-new()
Baseline 2025 Newly available
Since October 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Das ::view-transition-new() CSS Pseudoelement repräsentiert den "neuen" Anzeigestatus einer View-Transition — eine Live-Darstellung des Zustands nach der Transition.
Während einer View-Transition wird ::view-transition-new() im zugehörigen Pseudoelement-Baum eingefügt, wie in Der View-Transition-Pseudoelement-Baum erklärt. Es ist immer nur ein Kind von ::view-transition-image-pair() und hat niemals eigene Kinder.
Es ist ein ersetztes Element und kann daher mit Eigenschaften wie object-fit und object-position manipuliert werden. Es hat natürliche Dimensionen, die der Größe des Inhalts entsprechen.
Die folgende Standardstilierung ist im UA-Stylesheet enthalten:
: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 sind ebenfalls eingerichtet, um ::view-transition-new() zu animieren. Diese werden während der View-Transition dynamisch generiert; siehe die Abschnitte der Spezifikation Setup-Transition-Pseudoelemente und Aktualisierung der Pseudoelement-Stile für weitere Details.
Syntax
::view-transition-new([ <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 Pseudoelement, 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 umfasst jedes Element, das nicht über die Eigenschaftview-transition-nameeiner eigenen spezifischen View-Transition-Snapshot-Gruppe zugewiesen ist. <pt-name-selector>-
Der
<custom-ident>, der als Wert der Eigenschaftview-transition-namefestgelegt ist. <pt-class-selector>-
Der
<custom-ident>, der als Wert der Eigenschaftview-transition-classfestgelegt ist und von einem Punkt (.) vorangestellt wird.
Beispiele
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 |