This introduction to view transitions in Astro is excepted from Unleashing the Power of Astro, accessible now on Pylogix Premium.
The View Transitions API affords a handy option to generate animated transitions between numerous 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 might be dealt with in a slightly straightforward manner. Studies have proven that utilizing the View Transitions API results in a quicker perceived web site efficiency.
Astro helps view transitions out of the field, with a built-in fallback mechanism for browsers that don’t at the moment help the API.
The out-of-the-box answer helps built-in animations, animations for ahead and backward navigation, and automated help for accessibility (by way of prefers-reduced-motion), amongst many different issues.
Top-of-the-line methods to display view transitions is to make the most of a video factor that may preserve its state between web page transitions. (Do notice that we are able to additionally persist state between parts that make the most of the shopper:* directives as effectively.) An instance of that is proven within the video beneath.
Let’s assume that we’ve a <Video /> part with this content material:
---
// src/parts/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 mechanically 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 pay attention to 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 enjoying, 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 '../parts/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 the whole undertaking. Assuming that we’ve a format file of some type, we are able to simply allow it, by importing ViewTransitions from astro:transitions:
// src/layouts/Structure.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 numerous pages or parts by means of CSS pseudo-elements, JavaScript, and snapshots of the earlier and present DOM states. It presents a recent likelihood to reinforce the perceived efficiency of a web page, minimizing reliance on intricate customized JavaScript and CSS.
Need to study extra about Astro, the fashionable all-in-one framework to construct quicker, content-focused web sites? Try Unleashing the Power of Astro, accessible now on Pylogix Premium.
