::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 |
Browser-Kompatibilität
Loading…