Verwenden der View Transition API

Der Prozess der View-Transition

Lassen Sie uns den Prozess durchgehen, bei dem eine View-Transition funktioniert:

1. Eine View-Transition wird ausgelst. Wie dies erfolgt, hngt von der Art der View-Transition ab:

   • Im Fall von bergngen im selben Dokument (SPAs) wird eine View-Transition ausgelst, indem die Funktion, die die DOM-nderung der View auslsen wrde, als Callback an die Methode document.startViewTransition() bergeben wird, oder element.startViewTransition() im Fall von elementbezogenen View-Transitionen.
   • Bei bergngen ber Dokumente hinweg (MPAs) wird eine View-Transition ausgelst, indem die Navigation zu einem neuen Dokument initiiert wird. Sowohl das aktuelle als auch das Zieldokument der Navigation mssen sich in derselben Origin befinden und mssen sich fr die View-Transition ber eine @view-transition Regel in ihrem CSS mit einem navigation Deskriptor von auto anmelden.

     Hinweis: Eine aktive View-Transition hat eine zugehrige ViewTransition Instanz (zum Beispiel zurckgegeben von startViewTransition() im Fall von bergngen im selben Dokument (SPA)). Das ViewTransition-Objekt enthlt mehrere Versprechen, die es Ihnen ermglichen, Code als Reaktion auf das Erreichen verschiedener Teile des View-Transitionsprozesses auszufhren. Siehe Steuerung von View-Transitionen mit JavaScript fr weitere Informationen.

2. Auf der aktuellen (alten) Ansicht erfasst die API statische Bildschnappschsse von Elementen, die eine nicht-none deklarierte view-transition-name in ihrem View-Transition-Bereich haben. Standardmig ist der Bereich beim Dokumenten-Umfang die gesamte Ansicht, und beim Element-Umfang das Element auf dem startViewTransition() aufgerufen wird und alle seine Nachkommen.

3. Die Ansicht ndert sich:

   • Im Fall von bergngen im selben Dokument (SPAs) wird der Callback, der an startViewTransition() bergeben wird, aufgerufen, was dazu fhrt, dass sich das DOM ndert.

     Wenn der Callback erfolgreich ausgefhrt wurde, erfllt sich das ViewTransition.updateCallbackDone Versprechen, was Ihnen ermglicht, auf die Aktualisierung des DOMs zu reagieren.

   • Bei bergngen ber Dokumente hinweg (MPAs) erfolgt die Navigation zwischen dem aktuellen und dem Zieldokument.

4. Die API erfasst "Live"-Schnappschsse (d.h. interaktive DOM-Bereiche) von der neuen Ansicht.

   Zu diesem Zeitpunkt steht die View-Transition kurz vor der Ausfhrung, und das ViewTransition.ready Versprechen erfllt sich, was Ihnen ermglicht, zum Beispiel eine benutzerdefinierte JavaScript-Animation anstelle der Standardeinstellungen auszufhren.

5. Die alten Schnappschsse animieren "heraus", whrend die neuen Schnappschsse "hinein" animieren. Standardmig animieren die alten Schnappschsse von opacity 1 auf 0 und die neuen Schnappschsse von opacity 0 auf 1, was einen berblendeffekt erzeugt.

6. Wenn die bergangsanimationen ihre Endzustnde erreicht haben, werden die Schnappschsse zerstrt, und das ViewTransition.finished Versprechen erfllt sich und ermglicht Ihnen zu reagieren. Falls erforderlich, knnen Sie eine View-Transition daran hindern, ihren fertigen Zustand zu erreichen, bis ein bestimmtes Promise mithilfe der Methode ViewTransition.waitUntil() aufgelst wird.

Ein Hinweis zu Schnappschssen

Es ist erwhnenswert, dass beim Sprechen ber View-Transitionen der Begriff Schnappschuss hufig verwendet wird, um sich auf einen Teil des Bereichs zu beziehen, der eine view-transition-name deklariert hat. Diese Abschnitte werden separat von anderen Bereichen des Bereichs mit verschiedenen view-transition-name Werten animiert. Whrend der Prozess der Animation eines Schnappschusses ber eine View-Transition tatschlich zwei separate Schnappschsse umfasst einen des alten und einen des neuen UI-Zustands verwenden wir der Einfachheit halber den Begriff Schnappschuss fr beide.

Der Schnappschuss des alten UI-Zustands ist ein statisches Bild, sodass der Benutzer nicht damit interagieren kann, whrend es "heraustourniert".

Der Schnappschuss des neuen UI-Zustands ist ein interaktiver DOM-Bereich, sodass der Benutzer mit dem neuen Inhalt interagieren kann, whrend es "hineintourniert".

Der View-Transition-Pseudoelement-Baum

Um die ausgehenden und eingehenden bergangsanimationen zu erstellen, konstruiert die API einen Pseudoelement-Baum mit folgender Struktur:

root
   ::view-transition
     ::view-transition-group(root)
        ::view-transition-image-pair(root)
           ::view-transition-old(root)
           ::view-transition-new(root)
   head
   body
      

Im Fall von bergngen im selben Dokument (SPAs) wird der Pseudoelement-Baum im Dokument verfgbar gemacht. Bei dokumentenspezifischen View-Transitionen ist das Wurzelelement das <html> Element. Bei elementbezogenen View-Transitionen ist das Wurzelelement das Element, auf das startViewTransition() aufgerufen wurde.

Im Fall von bergngen ber Dokumente hinweg (MPAs) wird der Pseudoelement-Baum nur im Zieldokument verfgbar gemacht.

Die interessantesten Teile der Baumstruktur sind wie folgt:

• ::view-transition ist die Wurzel der View-Transitions-berlagerung, die alle View-Transitions-Gruppen enthlt und ber allen anderen Seiteninhalten sitzt.

• Ein ::view-transition-group() fungiert als Container fr jeden View-Transition-Schnappschuss. Das root-Argument spezifiziert den Standardschnappschuss die View-Transition-Animation wird auf den Schnappschuss angewendet, dessen view-transition-name root ist. Standardmig ist dies ein Schnappschuss des :root Elements, da die Standardbrowserstile dies definieren:

  css

  :root {
    view-transition-name: root;
  }
  

  Beachten Sie jedoch, dass Seitenautoren dies ndern knnen, indem sie das obige zurcksetzen und view-transition-name: root auf einem anderen Element setzen.

• ::view-transition-old() zielt auf den statischen Schnappschuss der alten Ansicht und ::view-transition-new() zielt auf den Live-Schnappschuss der neuen Ansicht. Beide rendern als ersetzter Inhalt, hnlich wie ein <img> oder <video>, was bedeutet, dass sie mit Eigenschaften wie object-fit und object-position gestylt werden knnen.

Erstellen einer grundlegenden View-Transition

Dieser Abschnitt verdeutlicht, wie man eine grundlegende View-Transition sowohl im SPA- als auch im MPA-Fall erstellt.

Grundlegende SPA-View-Transition

Eine SPA kann Funktionalitten einschlieen, um neue Inhalte abzurufen und das DOM als Reaktion auf eine Art von Ereignis zu aktualisieren, wie das Klicken auf einen Navigationslink oder das Abrufen eines Updates vom Server.

Unser View Transitions SPA Demo ist eine einfache Bildergalerie. Wir haben eine Reihe von <a> Elementen, die Thumbnail-<img>-Elemente enthalten, die dynamisch mit JavaScript generiert werden. Wir haben auch ein <figure> Element, das ein <figcaption> und ein <img> enthlt und die Bilder der vollen Gre anzeigt.

Wenn ein Thumbnail angeklickt wird, wird die Funktion displayNewImage() ber Document.startViewTransition() ausgefhrt, was dazu fhrt, dass das Bild in voller Gre und die zugehrige Bildunterschrift im <figure> angezeigt wird. Wir haben dies in eine updateView() Funktion gekapselt, die die View-Transition-API nur aufruft, wenn der Browser sie untersttzt:

function updateView(event) {
  // Handle the difference in whether the event is fired on the <a> or the <img>
  const targetIdentifier = event.target.firstChild || event.target;

  const displayNewImage = () => {
    const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
    galleryImg.src = mainSrc;
    galleryCaption.textContent = targetIdentifier.alt;
  };

  // Fallback for browsers that don't support View Transitions:
  if (!document.startViewTransition) {
    displayNewImage();
    return;
  }

  // With View Transitions:
  const transition = document.startViewTransition(() => displayNewImage());
}

Dieser Code gengt, um den bergang zwischen angezeigten Bildern zu behandeln. Untersttzende Browser zeigen den Wechsel von alten zu neuen Bildern und Bildunterschriften als sanften berblendeffekt (den Standard-View-Transition) an. In nicht untersttzenden Browsern funktioniert er immer noch, jedoch ohne die schne Animation.

Grundlegende MPA-View-Transition

Beim Erstellen einer bergangs-View ber Dokumente hinweg (MPA) ist der Prozess noch einfacher als bei SPAs. Kein JavaScript ist erforderlich, da die Ansicht aktualisiert wird, indem eine navigation zwischen Dokumenten der gleichen Origin anstatt einer JavaScript-initiierten DOM-nderung ausgelst wird. Um eine grundlegende MPA-View-Transition zu aktivieren, mssen Sie eine @view-transition Regel in das CSS fr sowohl das aktuelle als auch das Zieldokument einfgen, um sie anzumelden, wie folgt:

@view-transition {
  navigation: auto;
}

Unser View Transitions MPA Demo zeigt diese Regel in Aktion und demonstriert zustzlich, wie man die ausgehenden und eingehenden Animationen der View-Transition anpassen kann.

Anpassen Ihrer Animationen

Die Pseudoelemente der View-Transitions haben standardmig CSS-Animationen angewendet (die in ihren Referenzseiten detailliert beschrieben sind).

Die meisten Darstellungstransitionen erhalten eine standardmige sanfte berblendungsanimation, wie oben erwhnt. Es gibt einige Ausnahmen:

• height und width Transitionen haben eine sanfte Skalierungsanimation angewendet.
• position und transform Transitionen haben eine sanfte Bewegungsanimation angewendet.

Sie knnen die Standardanimationen nach Belieben mit regulrem CSS ndern zielen Sie die "von"-Animation mit ::view-transition-old() und die "zu"-Animation mit ::view-transition-new() an.

Zum Beispiel, um die Geschwindigkeit beider zu ndern:

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.5s;
}

Es wird empfohlen, das ::view-transition-group() mit solchen Style zu zielen in Fllen, in denen Sie sie auf ::view-transition-old() und ::view-transition-new() anwenden mchten. Aufgrund der Pseudoelement-Hierarchie und der Standardbenutzer-Agenten-Styling werden die Style von beiden geerbt. Zum Beispiel:

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

Im Fall von bergngen ber Dokumente hinweg (MPA) mssen die Pseudoelemente nur im Zieldokument enthalten sein, damit die View-Transition funktioniert. Wenn Sie die View-Transition in beide Richtungen verwenden mchten, mssen Sie sie in beiden enthalten.

Unser View Transitions MPA Demo enthlt das oben erwhnte CSS, geht jedoch einen Schritt weiter und definiert benutzerdefinierte Animationen und wendet sie auf die ::view-transition-old(root) und ::view-transition-new(root) Pseudoelemente an. Das Ergebnis ist, dass die Standardberblendungs-Transition durch eine "Hochwischen"-Transition ersetzt wird, wenn die Navigation erfolgt:

/* Create a custom animation */

@keyframes move-out {
  from {
    transform: translateY(0%);
  }

  to {
    transform: translateY(-100%);
  }
}

@keyframes move-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

/* Apply the custom animation to the old and new page states */

::view-transition-old(root) {
  animation: 0.4s ease-in both move-out;
}

::view-transition-new(root) {
  animation: 0.4s ease-in both move-in;
}

Verschiedene Animationen fr verschiedene Elemente

Standardmig werden alle unterschiedlichen Elemente, die whrend des View-Updates gendert werden, mit derselben Animation bergangsweise behandelt. Wenn Sie mchten, dass einige Elemente anders als die Standardanimation root animiert werden, knnen Sie sie mit der Eigenschaft view-transition-name trennen. Zum Beispiel, in unserem View Transitions SPA Demo werden die <figcaption> Elemente mit einem view-transition-name von figure-caption versehen, um sie in Bezug auf View-Transitionen vom Rest der Seite zu trennen:

figcaption {
  view-transition-name: figure-caption;
}

Mit diesem CSS wird der generierte Pseudoelement-Baum nun so aussehen:

html
   ::view-transition
  |   ::view-transition-group(root)
       ::view-transition-image-pair(root)
          ::view-transition-old(root)
          ::view-transition-new(root)
  |   ::view-transition-group(figure-caption)
        ::view-transition-image-pair(figure-caption)
           ::view-transition-old(figure-caption)
           ::view-transition-new(figure-caption)
   head
   body
      

Das Vorhandensein des zweiten Satzes von Pseudoelementen ermglicht es, separates View-Transition-Styling nur auf das <figcaption> anzuwenden. Die verschiedenen alten und neuen View-Erfassungen werden getrennt voneinander behandelt.

Der folgende Code wendet eine benutzerdefinierte Animation nur auf das <figcaption> an:

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes shrink-x {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

::view-transition-group(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;
}

Hier haben wir eine benutzerdefinierte CSS-Animation erstellt und sie auf die ::view-transition-old(figure-caption) und ::view-transition-new(figure-caption) Pseudoelemente angewendet. Wir haben auch eine Reihe anderer Styles zu beiden hinzugefgt, um sie an der gleichen Stelle zu halten und zu verhindern, dass das Standardstyling unsere benutzerdefinierten Animationen strt.

::view-transition-group(*) {
  animation-duration: 2s;
}

Gltige view-transition-name Werte

Die Eigenschaft view-transition-name kann einen einzigartigen <custom-ident> Wert annehmen, der ein beliebiger Bezeichner sein kann, der nicht als Schlsselwort missinterpretiert wrde. Der Wert von view-transition-name fr jedes gerenderte Element muss einzigartig sein. Wenn zwei gerenderte Elemente den gleichen view-transition-name zur gleichen Zeit haben, wird ViewTransition.ready abgelehnt und die Transition wird bersprungen.

Es kann auch Schlsselwortwerte von:

• none: Bewirkt, dass das Element nicht an einem separaten Schnappschuss teilnimmt, es sei denn, es hat ein Elternelement mit einem view-transition-name gesetzt, in welchem Fall es als Teil dieses Elements erfasst wird.
• match-element: Setzt automatisch einzigartige view-transition-name Werte auf alle ausgewhlten Elemente.

Nutzen der Standardanimationsstile

Beachten Sie, dass wir auch eine andere bergangsoption entdeckt haben, die einfacher und ein schneres Ergebnis produzierte als die obige. Unsere endgltige <figcaption> View-Transition sah am Ende so aus:

figcaption {
  view-transition-name: figure-caption;
}

::view-transition-group(figure-caption) {
  height: 100%;
}

Dies funktioniert, weil ::view-transition-group() standardmig width und height zwischen den alten und neuen Ansichten mit einem sanften Skalieren bergeht. Wir mussten lediglich eine feste height in beiden Zustnden festlegen, damit es funktioniert.

Steuerung von View-Transitionen mit JavaScript

Eine View-Transition hat eine zugehrige ViewTransition Objektinstanz, die mehrere Versprechensmitglieder enthlt und Ihnen ermglicht, JavaScript als Reaktion auf verschiedene Zustnde der Transition auszufhren. Zum Beispiel, erfllt sich ViewTransition.ready sobald der Pseudoelementbaum erstellt wurde und die Animation kurz vor dem Start steht, whrend ViewTransition.finished sich erfllt, sobald die Animation beendet ist, und die neue Seitenansicht fr den Benutzer sichtbar und interaktiv ist.

Die ViewTransition kann wie folgt zugegriffen werden:

1. ber die Document.activeViewTransition/Element.startViewTransition() Eigenschaft. Dies bietet eine konsistente Mglichkeit, in jedem Kontext auf die aktive View-Transition zuzugreifen, ohne sich darum kmmern zu mssen, sie fr einen spteren einfachen Zugriff zu speichern.
2. Im Fall von bergngen im selben Dokument (SPA) gibt die Methode document.startViewTransition() die ViewTransition zurck, die mit der Transition verbunden ist.
3. Im Fall von bergngen ber Dokumente hinweg (MPA):
   • Ein pageswap Ereignis wird ausgelst, wenn ein Dokument aufgrund einer Navigation entladen werden soll. Sein Ereignisobjekt (PageSwapEvent) bietet Zugriff auf die ViewTransition ber die PageSwapEvent.viewTransition Eigenschaft sowie eine NavigationActivation ber PageSwapEvent.activation, die den Navigationstyp und die aktuellen und Zieldokumentverlaufselemente enthlt.

     Hinweis: Wenn die Navigation eine Cross-Origin-URL irgendwo in der Umleitungskette hat, gibt die activation Eigenschaft null zurck.

   • Ein pagereveal Ereignis wird ausgelst, wenn ein Dokument zuerst gerendert wird, entweder beim Laden eines frischen Dokuments aus dem Netzwerk oder beim Aktivieren eines Dokuments (entweder aus dem back/forward cache (bfcache) oder prerender). Sein Ereignisobjekt (PageRevealEvent) bietet Zugriff auf das ViewTransition ber die PageRevealEvent.viewTransition Eigenschaft.

Lassen Sie uns einen Blick auf einige Beispielcodes werfen, um zu zeigen, wie diese Funktionen verwendet werden knnten.

Eine JavaScript-gesteuerte benutzerdefinierte bergangsformat in einem Dokument (SPA)

Das folgende JavaScript knnte verwendet werden, um eine kreisfrmige Enthllungs-View-Transition zu erstellen, die von der Position des Benutzercursors beim Klicken ausgeht, mit Animation bereitgestellt von der Web Animations API.

// 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 die alten und neuen Ansichtsstatus in irgendeiner Weise ineinander bergehen (der neue Status "wischt" direkt ber den alten Status, anstatt hineintourniert zu werden):

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

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

Eine JavaScript-gesteuerte benutzerdefinierte bergangsformat ber Dokumente hinweg (MPA)

Die Liste der Chrome DevRel Teammitglieder Demo bietet ein grundlegendes Set von Teamprofilseiten und zeigt, wie man die pageswap und pagereveal Ereignisse verwendet, um die ausgehenden und eingehenden Animationen einer ber Dokumente hinweggehenden View-Transition basierend auf den "von" und "zu" URLs anzupassen.

Der pageswap Ereignislistener sieht wie folgt aus. Dies setzt View-Transition-Namen auf die Elemente auf der ausgehenden Seite, die zu den Profilseiten verlinken. Wenn von der Startseite zu einer Profilseite navigiert wird, werden benutzerdefinierte Animationen nur fr das verknpfte Element bereitgestellt, das in jedem Fall angeklickt wird.

window.addEventListener("pageswap", async (e) => {
  // Only run this if an active view transition exists
  if (e.viewTransition) {
    const currentUrl = e.activation.from?.url
      ? new URL(e.activation.from.url)
      : null;
    const targetUrl = new URL(e.activation.entry.url);

    // Going from profile page to homepage
    // ~> The big img and title are the ones!
    if (isProfilePage(currentUrl) && isHomePage(targetUrl)) {
      // Set view-transition-name values on the elements to animate
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // Remove view-transition-names after snapshots have been taken
      // Stops naming conflicts resulting from the page state persisting in BFCache
      await e.viewTransition.finished;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }

    // Going to profile page
    // ~> The clicked items are the ones!
    if (isProfilePage(targetUrl)) {
      const profile = extractProfileNameFromUrl(targetUrl);

      // Set view-transition-name values on the elements to animate
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "name";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "avatar";

      // Remove view-transition-names after snapshots have been taken
      // Stops naming conflicts resulting from the page state persisting in BFCache
      await e.viewTransition.finished;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }
  }
});

Der pagereveal Ereignislistener sieht wie folgt aus. Dies funktioniert auf hnliche Weise wie der pageswap Ereignislistener, obwohl hier zu beachten ist, dass wir die "zu" Animation anpassen, fr Seitenelemente auf der neuen Seite.

window.addEventListener("pagereveal", async (e) => {
  // If the "from" history entry does not exist, return
  if (!navigation.activation.from) return;

  // Only run this if an active view transition exists
  if (e.viewTransition) {
    const fromUrl = new URL(navigation.activation.from.url);
    const currentUrl = new URL(navigation.activation.entry.url);

    // Went from profile page to homepage
    // ~> Set VT names on the relevant list item
    if (isProfilePage(fromUrl) && isHomePage(currentUrl)) {
      const profile = extractProfileNameFromUrl(fromUrl);

      // Set view-transition-name values on the elements to animate
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "name";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "avatar";

      // Remove names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#${profile} span`).style.viewTransitionName =
        "none";
      document.querySelector(`#${profile} img`).style.viewTransitionName =
        "none";
    }

    // Went to profile page
    // ~> Set VT names on the main title and image
    if (isProfilePage(currentUrl)) {
      // Set view-transition-name values on the elements to animate
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "name";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "avatar";

      // Remove names after snapshots have been taken
      // so that we're ready for the next navigation
      await e.viewTransition.ready;
      document.querySelector(`#detail main h1`).style.viewTransitionName =
        "none";
      document.querySelector(`#detail main img`).style.viewTransitionName =
        "none";
    }
  }
});

Stabilisierung des Seitenzustands, um ber Dokumente hinweggehende bergnge konsistent zu machen

Bevor Sie eine ber Dokumente hinweggehende Transition durchfhren, sollten Sie idealerweise warten, bis der Zustand der Seite stabilisiert wird, indem Sie sich auf Render-Blocking verlassen, um sicherzustellen, dass:

1. Kritische Styles geladen und angewendet werden.
2. Kritische Skripte geladen und ausgefhrt werden.
3. Das HTML, das fr die initiale Ansicht der Seite sichtbar ist, analysiert wurde, damit es konsistent gerendert wird.

Styles werden standardmig im Render-Prozess blockiert, es sei denn, sie werden dynamisch ber Skript zum Dokument hinzugefgt. Sowohl Skripte als auch dynamisch hinzugefgte Styles knnen mithilfe des blocking="render" Attributs im Render-Prozess blockiert werden.

Um sicherzustellen, dass Ihr initiales HTML analysiert wurde und vor dem bergang immer konsistent gerendert wird, knnen Sie <link rel="expect"> verwenden. In diesem Element fgen Sie die folgenden Attribute hinzu:

• rel="expect" um anzugeben, dass Sie dieses <link> Element verwenden mchten, um etwas HTML auf der Seite im Render-Prozess zu blockieren.
• href="#element-id" um die ID des Elements anzugeben, die Sie im Render-Prozess blockieren mchten.
• blocking="render" um das spezifizierte HTML im Render-Prozess zu blockieren.

Lassen Sie uns untersuchen, wie das mit einem Beispiel-HTML-Dokument aussieht:

<!doctype html>
<html lang="en">
  <head>
    <!-- This will be render-blocking by default -->
    <link rel="stylesheet" href="style.css" />

    <!-- Marking critical scripts as render blocking will
         ensure they're run before the view transition is activated -->
    <script async src="layout.js" blocking="render"></script>

    <!-- Use rel="expect" and blocking="render" to ensure the
         #lead-content element is visible and fully parsed before
         activating the transition -->
    <link rel="expect" href="#lead-content" blocking="render" />
  </head>
  <body>
    <h1>Page title</h1>
    <nav>...</nav>
    <div id="lead-content">
      <section id="first-section">The first section</section>
      <section>The second section</section>
    </div>
  </body>
</html>

Das Ergebnis ist, dass das Dokumentrendering blockiert wird, bis das fhrende Inhalts-<div> analysiert wurde, um eine konsistente View-Transition sicherzustellen.

Sie knnen auch ein media Attribut auf <link rel="expect"> Elementen angeben. Zum Beispiel mchten Sie mglicherweise weniger Inhalt blockieren, wenn die Seite auf einem Gert mit kleinem Bildschirm geladen wird, als auf einem Gert mit groem Bildschirm. Das ergibt Sinn auf einem Mobilgert wird beim ersten Laden der Seite weniger Inhalt sichtbar sein als bei einem Desktop.

Dies knnte mit dem folgenden HTML erreicht werden:

<link
  rel="expect"
  href="#lead-content"
  blocking="render"
  media="screen and (width > 640px)" />
<link
  rel="expect"
  href="#first-section"
  blocking="render"
  media="screen and (width <= 640px)" />