HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>activeViewTransition MDN</title>
  <style>
    body { font-family: sans-serif; margin: 1rem; }
    h1 { transition: none; }
    button { margin-top: 0.5rem; }
    ::view-transition-old(root), ::view-transition-new(root) {
      animation-duration: 0.6s;
    }
  </style>
</head>
<body>
  <h1 id="heading">Hello</h1>
  <button type="button" id="toggle">Toggle heading</button>
  <pre id="out">Click Toggle heading.</pre>
  <script>
    var heading = document.getElementById("heading");
    var out = document.getElementById("out");
    function updateUI() {
      heading.textContent = heading.textContent === "Hello" ? "Goodbye" : "Hello";
    }
    document.getElementById("toggle").addEventListener("click", function () {
      if (typeof document.startViewTransition !== "function") {
        updateUI();
        out.textContent = "No View Transition API — instant update";
        return;
      }
      document.startViewTransition(updateUI);
      if (document.activeViewTransition) {
        out.textContent = "A view transition is currently active…";
        document.activeViewTransition.finished.then(function () {
          out.textContent = "View transition finished. Heading: " + heading.textContent;
        });
      }
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Document.activeViewTransition — MDN pattern (Try It)