single-element/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>View Transitions with Vanilla JS</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h1>Animal Kingdom</h1>
    <div class="animals__list">
      <div class="animal__container">
        <img src="./dog.jpg" alt="Dog" />
        <div class="animal__text">
          <p>
            <strong> Dogs:</strong> Dogs are known for their strong sense of
            smell, and they have up to 300 million olfactory receptors in their
            noses, compared to about 5-6 million in humans. This remarkable
            sense of smell allows them to detect scents, track trails, and even
            identify medical conditions in some cases.
          </p>
          <button class="show__cat">Show Cat</button>
        </div>
      </div>
      <div class="animal__container hidden">
        <img src="./cat.jpg" alt="Cat" />
        <div class="animal__text">
          <p>
            <strong> Cats:</strong> Cats have retractable claws, which is a
            unique feature that sets them apart from many other animals. These
            sharp claws are useful for hunting, climbing, and defending
            themselves. When a cat is at rest or walking, their claws are
            retracted to keep them sharp, but they can extend them when needed
            for various tasks.
          </p>
          <button class="show__dog">Show Dog</button>
        </div>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", () => {
        const showCatButton = document.querySelector(".show__cat");
        const showDogButton = document.querySelector(".show__dog");
        const dogContainer = document.querySelector(
          ".animal__container:not(.hidden)"
        );
        const catContainer = document.querySelector(
          ".animal__container.hidden"
        );

        // Function to handle the transition
        function switchAnimal(showElement, hideElement) {
          if (document.startViewTransition) {
            document.startViewTransition(() => {
              hideElement.classList.add("hidden");
              showElement.classList.remove("hidden");
            });
          } else {
            // Fallback if View Transitions API is not supported
            hideElement.classList.add("hidden");
            showElement.classList.remove("hidden");
          }
        }

        // Event listener for the 'Show Cat' button
        showCatButton.addEventListener("click", () => {
          switchAnimal(catContainer, dogContainer);
        });

        // Event listener for the 'Show Dog' button
        showDogButton.addEventListener("click", () => {
          switchAnimal(dogContainer, catContainer);
        });
      });
    </script>
  </body>
</html>