HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>startViewTransition slideshow</title>
  <style>
    html { font-family: sans-serif; margin: 1rem; }
    section {
      height: 200px; font-size: 2rem; background: green;
      display: flex; justify-content: center; align-items: center;
      margin: 1rem 0;
    }
    button { position: absolute; top: 8px; right: 8px; }
    ::view-transition-group(root) { animation-duration: 1s; }
  </style>
</head>
<body>
  <p>Lorem ipsum surrounding content stays interactive during the transition.</p>
  <section>Slide 1</section>
  <button type="button">Update slide</button>
  <script>
    var slide = document.querySelector("section");
    var btn = document.querySelector("button");
    function updateSlide() {
      if (slide.textContent === "Slide 1") {
        slide.textContent = "Slide 2";
        slide.style.backgroundColor = "orange";
      } else {
        slide.textContent = "Slide 1";
        slide.style.backgroundColor = "green";
      }
    }
    function handleClick() {
      if (!slide.startViewTransition) {
        updateSlide();
        return;
      }
      slide.startViewTransition(function () { updateSlide(); });
    }
    btn.addEventListener("click", handleClick);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.startViewTransition — MDN slideshow (Try It)