This introduction to view transitions in Astro is excepted from Unleashing the Energy of Astro, obtainable now on SitePoint Premium.
The View Transitions API provides a handy solution to generate animated transitions between varied DOM states whereas concurrently updating the DOM content material in a single operation. Attaining this has historically been tough on the Net, however with this new API, transitions may be dealt with in a moderately straightforward means. Research have proven that utilizing the View Transitions API results in a sooner perceived web site efficiency.
Astro helps view transitions out of the field, with a built-in fallback mechanism for browsers that don’t at present assist the API.
The out-of-the-box answer helps built-in animations, animations for ahead and backward navigation, and computerized assist for accessibility (through prefers-reduced-motion), amongst many different issues.
Top-of-the-line methods to reveal view transitions is to make the most of a video factor that can preserve its state between web page transitions. (Do be aware that we are able to additionally persist state between elements that make the most of the shopper:* directives as properly.) An instance of that is proven within the video under.
Let’s assume that now we have a <Video /> part with this content material:
---
// src/elements/Video
const src="https://res.cloudinary.com/tamas-demo/video/add/f_auto,q_auto/imagecon/ship.mp4";
const {
autoplay = false,
controls = true,
loop = false
} = Astro.props;
---
<video {controls} {autoplay} {loop} transition:persist>
<supply {src} />
</video>
Within the code above, we’re grabbing a video from Cloudinary. Moreover, we’re permitting the video to robotically play and loop (begin over) when it finishes, and we’re offering management buttons for the person. These settings are decided by properties despatched to this video part, and if these properties aren’t offered, default values are used. These variables are then added to the HTML <video> and <supply> parts.
Please be aware of the transition:persist directive. With this directive, we’ll preserve the state of the video participant between transitions: whereas navigating to the following web page, the video will carry on taking part in, whereas different components of the web page will present the up to date content material. We will use this part on each the index.astro and about.astro pages:
// src/pages/index.astro
---
import Video from '../elements/Video.astro';
---
<!-- another HTML -->
<Video />
Lastly, we have to allow web page transitions, which we are able to both do per web page or globally for all the mission. Assuming that now we have a structure file of some type, we are able to simply allow it, by importing ViewTransitions from astro:transitions:
// src/layouts/Format.astro
---
import { ViewTransitions } from 'astro:transitions';
---
<html lang="en">
<head>
<title>My web site!</title>
<ViewTransitions />
</head>
<physique>
<slot />
</physique>
</html>
In abstract, the experimental View Transitions API simplifies visible transitions between varied pages or parts by means of CSS pseudo-elements, JavaScript, and snapshots of the earlier and present DOM states. It presents a contemporary probability to boost the perceived efficiency of a web page, minimizing reliance on intricate customized JavaScript and CSS.
Wish to be taught extra about Astro, the fashionable all-in-one framework to construct sooner, content-focused web sites? Try Unleashing the Energy of Astro, obtainable now on SitePoint Premium.
