Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten.Erfahre mehr über dieses Experiment.
::view-transition-old()
Baseline 2025Newly 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-old()CSSPseudo-Element repräsentiert den "alten" Ansichtsstatus eines Ansichtsübergangs – ein statisches Abbild der alten Ansicht vor dem Übergang.
Während eines Ansichtsübergangs ist::view-transition-old() im zugehörigen Pseudo-Element-Baum enthalten, wie im AbschnittDer Pseudo-Element-Baum des Ansichtsübergangs erklärt, sofern ein "alter" Ansichtsstatus vorliegt, den es darzustellen gilt. 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 wieobject-fit undobject-position manipuliert werden. Es hat natürliche Abmessungen, die der Größe des Inhalts entsprechen.
Das folgende Standard-Styling 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-out { to { opacity: 0; }}Hinweis:Zusätzliche Stile für den Ansichtsübergang werden ebenfalls eingerichtet, um::view-transition-old() zu animieren. Diese werden während des Ansichtsübergangs dynamisch erzeugt; sehen Sie die Abschnitte zur SpezifikationEinrichten von Übergangspseudo-Elementen undAktualisieren von Pseudo-Element-Stilen für weitere Details.
Syntax
::view-transition-old([ <pt-name-selector> <pt-class-selector>? ] | <pt-class-selector>) { /* ... */}Parameter
*Der Universal-Selektor (
*) wählt alle Ansichtsübergangsgruppen auf einer Seite aus.rootVeranlasst das Pseudo-Element, mit der Standard-
root-Ansichtsübergangs-Snapshot-Gruppe übereinzustimmen, die vom Benutzer-Agent erstellt wurde, um den Ansichtsübergang für die gesamte Seite aufzunehmen. Diese Gruppe umfasst jedes Element, das nicht über dieview-transition-name-Eigenschaft einer eigenen spezifischen Ansichtsübergangs-Snapshot-Gruppe zugewiesen ist.<pt-name-selector>Der
<custom-ident>, der als Wert derview-transition-name-Eigenschaft gesetzt ist.<pt-class-selector>Der
<custom-ident>, der als Wert derview-transition-class-Eigenschaft gesetzt und von einem Punkt (.) gefolgt ist.
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-old |