ViewTransition

Instanzeigenschaften

ViewTransition.finished Schreibgeschützt

Ein Promise, das erfüllt wird, sobald die Übergangsanimation abgeschlossen ist und die neue Seitenansicht für den Benutzer sichtbar und interaktiv ist.

ViewTransition.ready Schreibgeschützt

Ein Promise, das erfüllt wird, sobald der Pseudo-Element-Baum erstellt ist und die Übergangsanimation zu starten beginnt.

ViewTransition.types Schreibgeschützt

Ein ViewTransitionTypeSet, das den Zugriff auf die auf die Ansichtstransition gesetzten Typen ermöglicht und deren Änderung erlaubt.

ViewTransition.updateCallbackDone Schreibgeschützt

Ein Promise, das erfüllt wird, wenn das Versprechen, das durch den Rückruf der document.startViewTransition()-Methode zurückgegeben wird, erfüllt ist.

Instanzmethoden

skipTransition()

Überspringt den Animationsanteil der Ansichtstransition, überspringt jedoch nicht die Ausführung des document.startViewTransition()-Rückrufs, der das DOM aktualisiert.

waitUntil()

Verzögert den Abschluss der Ansichtstransition und die Zerstörung des zugehörigen Pseudo-Element-Baums, bis ein in die Methode übergebenes Promise aufgelöst wurde.

Beispiele

Im folgenden SPA-Beispiel wird das ViewTransition.ready-Versprechen verwendet, um eine benutzerdefinierte zirkulare Offenlegungstransition zu starten, die von der Position des Cursors des Benutzers beim Klicken ausgeht, wobei die Animation von der 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 außerdem das folgende CSS, um die standardmäßige CSS-Animation auszuschalten und zu verhindern, dass die alten und neuen Ansichtsstatus in jeglicher Weise überblenden (der neue Status "wischt" direkt über den alten Status, anstatt zu überblenden):

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

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• View Transition API
• Verwendung der View Transition API
• Verwendung von Ansichtstransitionstypen
• Glatte Übergänge mit der View Transition API