HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>startViewTransition finished</title>
  <style>body{font-family:system-ui,sans-serif;margin:1rem;}::view-transition-group(root){animation-duration:0.6s;}</style>
</head>
<body>
  <h1 id="title">Page A</h1>
  <button type="button" id="go">Swap title</button>
  <pre id="out">Ready</pre>
  <script>
    var title = document.getElementById("title");
    var out = document.getElementById("out");
    document.getElementById("go").addEventListener("click", async function () {
      var next = title.textContent === "Page A" ? "Page B" : "Page A";
      function update() { title.textContent = next; }
      if (!document.startViewTransition) {
        update();
        out.textContent = "updated without transition";
        return;
      }
      var transition = document.startViewTransition(update);
      await transition.finished;
      out.textContent = "transition finished";
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Document.startViewTransition — await finished (Try It)