Neuerungen bei Ansichtsübergängen (Update 2025)

Bramus

Veröffentlicht: 8. Oktober 2025

Seit der Einführung von Ansichtsübergängen für dasselbe Dokument im Jahr 2023 hat sich viel getan.

2024 haben wir Dokumentübergänge eingeführt, Verbesserungen wie view-transition-class und Ansichtsübergangstypen hinzugefügt und Safari hat ebenfalls Unterstützung für Ansichtsübergänge eingeführt.

In diesem Beitrag erhalten Sie einen Überblick über die Änderungen bei Ansichtsübergängen im Jahr 2025.

Bessere Unterstützung von Browsern und Frameworks

Ansichtsübergänge im selben Dokument werden bald als „Baseline Newly available“ eingestuft

Ein Schwerpunkt von Interop 2025 ist die View Transition API, insbesondere Übergänge zwischen Ansichten im selben Dokument mit document.startViewTransition(updateCallback), view-transition-class, automatischer Namensgebung mit view-transition-name: match-element und dem CSS-Selektor :active-view-transition.

Firefox plant, diese Funktionen in die kommende Firefox-Version 144 aufzunehmen, die am 14. Oktober 2025 stabil wird. Dadurch werden diese Funktionen als „Baseline Newly available“ gekennzeichnet.

Unterstützung für die View Transition API ist jetzt in React Core

Das React-Team hat das ganze Jahr über daran gearbeitet, View Transitions in den Kern von React zu integrieren. Sie kündigten react@experimental die Unterstützung bereits im April an und diese Woche, auf der React Conf, haben sie die Unterstützung in react@canary verschoben, was bedeutet, dass das Design fast fertig ist.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

Alle Details finden Sie in der React-Dokumentation<ViewTransition>. Eine gute Einführung in das Thema bietet dieser Vortrag von Aurora Scharff.

Vor Kurzem eingeführte Funktionen

Elemente mit view-transition-name: match-element automatisch benennen

Wenn Sie ein Element als Teil eines Ansichtsübergangs kennzeichnen möchten, geben Sie ihm ein view-transition-name. Das ist wichtig für Ansichtsübergänge, da dadurch Funktionen wie der Übergang zwischen zwei verschiedenen Elementen möglich werden. Jedes Element hat auf beiden Seiten des Übergangs denselben view-transition-name-Wert und Ansichtsübergänge erledigen den Rest.

Das eindeutige Benennen von Elementen kann jedoch umständlich werden, wenn viele Elemente übertragen werden, die sich nicht wirklich ändern. Wenn Sie 100 Elemente in einer Liste verschieben, müssen Sie sich 100 eindeutige Namen ausdenken.

Dank match-element müssen Sie das nicht tun. Wenn Sie dies als Wert für view-transition-name verwenden, generiert der Browser für jedes übereinstimmende Element eine interne view-transition-name basierend auf der Identität des Elements.

In dieser Demo wird dieser Ansatz verwendet. Jede Karte in der Zeile erhält eine automatisch generierte view-transition-name.

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

Die Karte, die ein- oder ausgeblendet wird, erhält einen expliziten Namen. Dieser Name wird im CSS verwendet, um dem Snapshot bestimmte Animationen zuzuweisen. Die Snapshots aller anderen Karten werden mit dem zugehörigen view-transition-class formatiert.

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

In den Entwicklertools werden jetzt Regeln angezeigt, die auf Pseudoklassen mit view-transition-class ausgerichtet sind.

Wenn Sie Ansichtsübergänge debuggen möchten, können Sie alle Animationen mit dem Animationsbereich in den Entwicklertools pausieren. So haben Sie Zeit, die Pseudoelemente zu untersuchen, ohne sich Sorgen machen zu müssen, dass die Ansichtsübergänge abgeschlossen werden. Sie können die Zeitachse der Animation sogar manuell durchgehen, um zu sehen, wie die Übergänge ablaufen.

Bisher wurden in den Chrome-Entwicklertools bei der Untersuchung eines der ::view-transition-*-Pseudoelemente keine Regeln angezeigt, die auf Pseudoelemente mit dem festgelegten view-transition-class ausgerichtet waren. Das hat sich in Chrome 139 geändert, in dem die Funktion hinzugefügt wurde.

Verschachtelte Ansichtsübergangsgruppen sind ab Chrome 140 verfügbar

Wenn eine Ansichtsübergang ausgeführt wird, werden die per Snapshot erfassten Elemente in einem Baum von Pseudoelementen gerendert. Standardmäßig ist der generierte Baum „flach“. Das bedeutet, dass die ursprüngliche Hierarchie im DOM verloren geht und alle erfassten Gruppen für Ansichtsübergänge unter einem einzelnen ::view-transition-Pseudoelement gleichgeordnet sind.

Dieser Ansatz mit einem flachen Baum ist für viele Anwendungsfälle ausreichend, wird aber problematisch, wenn visuelle Effekte wie Clipping oder 3D-Transformationen verwendet werden. Dafür ist eine gewisse Hierarchie im Baum erforderlich.

Dank Nested view transition groups (Verschachtelte Gruppen für Ansichtsübergänge) können Sie jetzt ::view-transition-group-Pseudoelemente ineinander verschachteln. Wenn Ansichtsübergangsgruppen verschachtelt sind, können Effekte wie das Zuschneiden während des Übergangs wiederhergestellt werden.

Informationen zur Verwendung von Ansichtsübergangsgruppen

Pseudoelemente erben jetzt mehr Animationseigenschaften

Wenn Sie eine der Langform-Properties animation-* für ein ::view-transition-group(…)-Pseudoelement festlegen, erben die enthaltenen ::view-transition-image-pair(…)-, ::view-transition-old(…)- und ::view-transition-new(…)-Elemente diese Property ebenfalls. Das ist praktisch, weil die Überblendung zwischen ::view-transition-new(…) und ::view-transition-old(…)automatisch mit ::view-transition-group(…) synchronisiert wird.

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

Anfangs war die Vererbung auf animation-duration und animation-fill-mode (und später auch animation-delay) beschränkt, wurde aber jetzt auf weitere Animationseigenschaften ausgeweitet.

Browser, die Ansichtsübergänge unterstützen, sollten jetzt Folgendes in ihrem User-Agent-Stylesheet haben:

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

Die Funktion Pseudo-Elemente, die mehr Attribute übernehmen wurde in Chrome 140 eingeführt.

Die Ausführung des finished-Promise-Callbacks wartet nicht mehr auf einen Frame.

Wenn das finished-Promise verwendet wurde, um einen Callback auszuführen, hat Chrome bisher gewartet, bis ein Frame gerendert wurde, bevor die Logik ausgeführt wurde. Dadurch kann es am Ende der Animation zu einem Flackern kommen, wenn das Skript versucht, durch Verschieben einiger Stile einen visuell ähnlichen Zustand beizubehalten.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

Durch diese Änderung des Timings wird die Situation korrigiert, indem die Schritte zum Bereinigen des Ansichtsübergangs asynchron nach Abschluss des Lebenszyklus ausgeführt werden. So wird sichergestellt, dass der visuelle Frame, der bei der Auflösung des Versprechens finished erzeugt wird, die Struktur des Ansichtsübergangs beibehält und das Flimmern vermieden wird.

Diese Änderung des Timings wurde in Chrome 140 eingeführt.

Geplante Funktionen

Das Jahr ist noch nicht vorbei, also haben wir noch etwas Zeit, weitere Funktionen einzuführen.

Scoped View Transitions können in Chrome 140 getestet werden

Scoped View Transitions ist eine vorgeschlagene Erweiterung der View Transition API, mit der Sie eine Ansichtsübergang für einen Teilbaum des DOM starten können, indem Sie element.startViewTransition() (anstelle von document.startViewTransition()) für ein beliebiges HTMLElement aufrufen.

Mit bereichsbezogenen Übergängen können mehrere Ansichtsübergänge gleichzeitig ausgeführt werden, sofern sie unterschiedliche Übergangsstamm-Elemente haben. Zeigerereignisse werden nur für diesen Teilbaum verhindert (was Sie wieder aktivieren können) und nicht für das gesamte Dokument. Außerdem können Elemente außerhalb des Übergangs-Roots über dem bereichsbezogenen Ansichtsübergang gerendert werden.

In der folgenden Demo können Sie einen Punkt innerhalb seines Containers verschieben, indem Sie auf eine der Schaltflächen klicken. Das kann mit Ansichtsübergängen auf Dokumentebene oder auf Elementebene erfolgen. So können Sie sehen, wie sie sich unterschiedlich verhalten.

Die Funktion kann ab Chrome 140 getestet werden, wenn das Flag „Experimentelle Webplattformfunktionen“ in chrome://flags aktiviert ist. Wir freuen uns über Feedback von Entwicklern.

Die Position von ::view-transition ändert sich in Chrome 142 von fixed zu absolute

Das ::view-transition-Pseudonym wird derzeit mit position: fixed positioniert. Gemäß einem Beschluss der CSS Working Group wird dies in position: absolute geändert.

Diese position-Wertänderung von fixed zu absolute, die in Chrome 142 eingeführt wird, ist nicht sichtbar, da der enthaltende Block des ::view-transition-Pseudoelements ohnehin der Snapshot-enthaltende Block ist. Der einzige beobachtbare Effekt ist ein anderer position-Wert bei einem getComputedStyle.

document.activeViewTransition wird in Chrome 142 eingeführt

Wenn eine Ansichtsübergang gestartet wird, wird eine ViewTransition-Instanz erstellt. Dieses Objekt enthält mehrere Promises und Funktionen zum Verfolgen des Übergangsfortschritts sowie zum Ausführen von Manipulationen wie dem Überspringen des Übergangs oder dem Ändern seiner Typen.

Anstatt dass Sie diese Instanz manuell im Blick behalten müssen, stellt Chrome jetzt eine document.activeViewTransition-Eigenschaft bereit, die dieses Objekt darstellt. Wenn keine Übergangsphase läuft, ist der Wert null.

Bei Ansichtsübergängen im selben Dokument wird der Wert festgelegt, wenn Sie document.startViewTransition aufrufen. Bei dokumentübergreifenden Ansichtsübergängen können Sie in den Ereignissen pageswap und pagereveal auf diese ViewTransition-Instanz zugreifen.

Die Unterstützung für document.activeViewTransition wird in Chrome 142 eingeführt.

Verhindern, dass eine Ansichtsübergang automatisch mit ViewTransition.waitUntil abgeschlossen wird

Eine Ansichtsübergang erreicht automatisch den Status finished, wenn alle Animationen abgeschlossen sind. Um dies zu verhindern, können Sie bald ViewTranistion.waitUntil verwenden. Wenn Sie ein Promise übergeben, erreicht ViewTransition den Status finished erst, wenn auch das übergebene Promise aufgelöst wird.

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

Diese Änderung wird im Laufe des Jahres eingeführt und ermöglicht es beispielsweise, auf eine fetch zu warten oder die einfachere Implementierung eines scrollbasierten Ansichtsübergangs zu ermöglichen.

Nächste Schritte

Wie Sie sehen, haben wir seit der ersten Einführung von View Transitions im Jahr 2023 nicht stillgesessen. Wir freuen uns darauf, in Zukunft Übergänge mit Bereichsansicht zu implementieren, und sind wie immer offen für Feedback.

Wenn Sie Fragen zu Ansichtsübergängen haben, können Sie uns in den sozialen Medien kontaktieren. Funktionsanfragen für Ansichtsübergänge können bei der CSS WG eingereicht werden. Sollte ein Fehler auftreten, melden Sie ihn in Chromium.