ViewTransition

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

We’d love to hear your thoughts on the next set of proposals for the JavaScript language. You can find a description of the proposals here.
Please take two minutes to fill out our short survey.

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, die Animation auszuführen, oder die Animation ist beendet) oder die Transition ganz zu überspringen.

Dieser Objekttyp wird auf folgende Weise zur Verfügung gestellt:

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

Instanzeigenschaften

ViewTransition.finished Schreibgeschützt

Ein Promise, das erfüllt wird, sobald die Übergangsanimation beendet 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 Pseudoelementbaum erstellt ist und die Übergangsanimation kurz davor steht, zu starten.

ViewTransition.updateCallbackDone Schreibgeschützt

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

Instanzmethoden

skipTransition()

Überspringt den Animationsabschnitt der Ansichtstransition, jedoch nicht den Rückruf document.startViewTransition(), der das DOM aktualisiert.

Beispiele

Im folgenden SPA-Beispiel wird das Promise ViewTransition.ready verwendet, um eine benutzerdefinierte, kreisförmige Enthüllungstransition auszulösen, die von der Position des Benutzercursors bei einem Klick ausgeht, wobei die Animation durch die Web Animations API bereitgestellt wird.

js
// 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 standardmäßige CSS-Animation abzuschalten und zu verhindern, dass die alten und neuen Ansichtsstatus in irgendeiner Weise überblendet werden (der neue Zustand "wischt" direkt über den alten Zustand, anstatt zu überblenden):

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

Specification
CSS View Transitions Module Level 1
# viewtransition

Browser-Kompatibilität

Siehe auch