ViewTransition

Baseline 2025 *

Neu verfügbar

Seit October 2025 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Das ViewTransition Interface der View Transition API repräsentiert eine aktive Ansichtstransition und bietet Funktionen, um auf das Erreichen verschiedener Zustände der Transition zu reagieren (z.B. bereit sein, um die Animation zu starten, oder Animation beendet) oder die Transition insgesamt zu überspringen.

Dieser Objekttyp ist auf folgende Weise verfügbar:

Über die Document.activeViewTransition Eigenschaft. Diese bietet eine konsistente Methode, um auf die aktive Ansichtstransition in jedem Kontext zuzugreifen, ohne sich darum sorgen zu müssen, sie für einen späteren einfachen Zugriff zu speichern.
Im Fall von Transitionen im selben Dokument (SPA) wird es auch durch die Methode document.startViewTransition() zurückgegeben.
Im Fall von Übergängen zwischen Dokumenten (MPA) wird es auch verfügbar gemacht:
- Auf der ausgehenden Seite über die Eigenschaft PageSwapEvent.viewTransition des Ereignisobjekts pageswap.
- Auf der eingehenden Seite über die Eigenschaft PageRevealEvent.viewTransition des Ereignisobjekts pagereveal.

Wenn eine Ansichtstransition durch einen startViewTransition() Aufruf ausgelöst wird (oder eine Seitennavigation im Fall von MPA-Transitionen), folgt eine Abfolge von Schritten, wie in Der Ansichtstransitionsprozess erklärt wird. Dies erklärt auch, wann die verschiedenen Versprechen erfüllt werden.

Instanzeigenschaften

ViewTransition.finished Schreibgeschützt: Ein Promise, das sich erfüllt, sobald die Transitionanimation beendet ist und die neue Seitenansicht für den Benutzer sichtbar und interaktiv ist.
ViewTransition.ready Schreibgeschützt: Ein Promise, das sich erfüllt, sobald der Pseudoelementbaum erstellt ist und die Transitionanimation bald starten wird.
ViewTransition.types Schreibgeschützt: Ein ViewTransitionTypeSet, das den Zugriff auf die auf der Ansichtstransition gesetzten Typen und deren Änderung ermöglicht.
ViewTransition.updateCallbackDone Schreibgeschützt: Ein Promise, das sich erfüllt, wenn das Versprechen, das von dem Callback der Methode document.startViewTransition() zurückgegeben wird, erfüllt ist.

Instanzmethoden

skipTransition(): Überspringt den Animationsanteil der Ansichtstransition, überspringt jedoch nicht das Ausführen des Callbacks der document.startViewTransition() Methode, das das DOM aktualisiert.
waitUntil(): Verzögert das Beenden der Ansichtstransition und die Zerstörung des zugehörigen Pseudoelementbaums, bis ein in die Methode übergebenes Promise aufgelöst ist.

Beispiele

Im folgenden SPA-Beispiel wird das Versprechen ViewTransition.ready verwendet, um eine benutzerdefinierte kreisförmige Aufdeckungsansichtstransition auszulösen, die von der Position des Benutzer-Cursors bei Klick ausgeht, wobei die Animation durch die Web Animations API bereitgestellt wird.

// Store the last click event
let lastClick;
addEventListener("click", (event) => (lastClick = event));

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // Get the click position, or fallback to the middle of the screen
  const x = lastClick?.clientX ?? innerWidth / 2;
  const y = lastClick?.clientY ?? innerHeight / 2;
  // Get the distance to the furthest corner
  const endRadius = Math.hypot(
    Math.max(x, innerWidth - x),
    Math.max(y, innerHeight - y),
  );

  // Create a transition:
  const transition = document.startViewTransition(() => {
    updateTheDOMSomehow(data);
  });

  // Wait for the pseudo-elements to be created:
  transition.ready.then(() => {
    // Animate the root's new view
    document.documentElement.animate(
      {
        clipPath: [
          `circle(0 at ${x}px ${y}px)`,
          `circle(${endRadius}px at ${x}px ${y}px)`,
        ],
      },
      {
        duration: 500,
        easing: "ease-in",
        // Specify which pseudo-element to animate
        pseudoElement: "::view-transition-new(root)",
      },
    );
  });
}

Diese Animation erfordert auch das folgende CSS, um die Standard-CSS-Animation auszuschalten und zu verhindern, dass der alte und der neue Ansichtsstatus in irgendeiner Weise ineinander übergehen (der neue Status "wischt" direkt über dem alten Status, anstatt zu transitionieren):

css

::view-transition-image-pair(root) {
  isolation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
  display: block;
}

Spezifikationen

Spezifikation
CSS View Transitions Module Level 1 # viewtransition

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden