Astro JS - Transition Directives

Quiz

Astro Transition

Astro supports view transitions out of the box. The view transitions feature will update your page content without the browserâs normal, full-page navigation refresh. It also provide seamless animations between pages. Astro supports fallback strategies for when the userâs browser doesnât support the view transitions feature.

Astro Transition Directives

The transition directives are used to apply a transition effect to a view. Astro will automatically assign corresponding elements found in both the old page and the new page a shared, unique view-transition-name. The transition directive is defined as transition:*, where * is the name of the transition effect that you want to apply to the view.

Astro provides the following transition directives:

transition:name: This will specify a transition name to associate a pair of DOM elements.
transition:animate: This will allows you to override Astroâs default animation while replacing the old element with the new one by specifying an animation type.
transition:persist: This will allows you to override Astroâs default replacing old elements for new ones and instead persist components.

Transition Name

The transition name is a unique identifier that is used to associate a pair of DOM elements. The transition name is specified as transition:name directive. This is is used to identify the old and new elements that need to be animated.

<!--In old page-->
<aside transition:name="hero"></aside>

<!--In new page-->
<aside transition:name="hero"></aside>

Note that the provided transition:name value can only be used once on each page. Set this manually when Astro canât infer a proper name itself, or for more fine control over matching elements.

Transition State

Astro allow you to control the transition state of a view. For example, You can keep components and HTML elements instead of replacing them across page navigation using the transition:persist directive.

In the code below, the following <video> will continue to play as you navigate to another page that contains the same video element. This works for both forwards and backwards navigation.

<video controls muted autoplay transition:persist>
    <source
        src="link/to/video/file.mp4"
        type="video/mp4"
    />
</video>

Built-in Animation Directives

Astro provides built-in animation directives for common transition effects. These directives are used in combination with the transition:name attribute. Add the transition:animate directive to individual elements to customize the behavior of specific transitions.

fade (default): An opinionated crossfade animation. The old content fades out and the new content fades in.
initial: Opt out of Astroâs opinionated crossfade animation and use the browserâs default styling.
slide: An animation where the old content slides out to the left and new content slides in from the right. On backwards navigation, the animations are the opposite.
none: Disable the browserâs default animations. Use on a pageâs element to disable the default fade for every element on the page.

Example

The example below produces a slide animation for the body content while disabling the browserâs default fade animation for the rest of the page:

---
import CommonHead from "../components/CommonHead.astro";
---

<html transition:name="root" transition:animate="none">
    <head>
        <CommonHead />
    </head>
    <body>
        <header>
        ...
        </header>
        <!-- Override your page default on a single element -->
        <main transition:animate="slide">
        ...
        </main>
    </body>
</html>

Print Page