Document view transitions

View transitions enable seamless animations between different states of a web application. They enhance user experience by providing visual continuity during navigation or state changes.

Getting Started

View transitions enable seamless animations between different states of a web application. They enhance user experience by providing visual continuity during navigation or state changes.

    <div class="page" id="page1">Page 1</div>
<div class="page" id="page2" hidden>Page 2</div>
<button onclick="navigateToPage2()">Go to Page 2</button>
  

The example above demonstrates a basic setup for view transitions. The JavaScript function below handles the transition between pages:

    function navigateToPage2() {
  document.startViewTransition(() => {
    document.getElementById('page1').hidden = true;
    document.getElementById('page2').hidden = false;
  });
}
  

CSS can be used to define the animation styles for the transition. For example:

    @keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.page {
  animation: fade 0.5s ease-in-out;
}
  

By combining HTML, JavaScript, and CSS, developers can create smooth and visually appealing transitions that improve the overall user experience.