datastar/site/static/md/examples/view_transition_api.md

View Transition API

Demo

Fade transition Slide transition

Explanation

This comes from an issue on how to use the data-view-transition. This lead to simplifying the API.

Full page transitions

Datastar automatically adds the proper <meta/> tags to properly transition full page updates any elements with shared ids will automatically transition.

Inter-page transitions

By default, if document.startViewTransition exists and incoming SSE fragment has data: useViewTransition true update will be wrapped in a startViewTransition async call. This will automatically fade in/out. If you want custom animation, such as

<style>
  @keyframes fade-in {
    from {
      opacity: 0;
    }
  }

  @keyframes fade-out {
    to {
      opacity: 0;
    }
  }

  @keyframes slide-from-right {
    from {
      transform: translateX(90px);
    }
  }

  @keyframes slide-to-left {
    to {
      transform: translateX(-90px);
    }
  }

  /_
    Define
    animations
    for
    the
    old
    and
    new
    content
    _/
    ::view-transition-old(slide-it) {
    animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out, 600ms
        cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
  }

  ::view-transition-new(slide-it) {
    animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in, 600ms
        cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.5s;
  }
</style>

You can add data-view-transition="slide-it" to your elements to use the custom transition