[ad_1]
This introduction to view transitions in Astro is excepted from Unleashing the Energy of Astro, accessible now on SitePoint Premium.
The View Transitions API affords a handy approach to generate animated transitions between varied DOM states whereas concurrently updating the DOM content material in a single operation. Attaining this has historically been troublesome on the Net, however with this new API, transitions could be dealt with in a reasonably straightforward means. Research have proven that utilizing the View Transitions API results in a quicker perceived website 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 (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 aspect that may keep its state between web page transitions. (Do word that we are able to additionally persist state between elements that make the most of the consumer:* directives as properly.) An instance of that is proven within the video under.
Let’s assume that we have now a <Video /> element 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 consumer. These settings are decided by properties despatched to this video element, 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 keep the state of the video participant between transitions: whereas navigating to the subsequent 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 are able to use this element 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 your complete venture. Assuming that we have now a structure file of some kind, 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 website!</title>
<ViewTransitions />
</head>
<physique>
<slot />
</physique>
</html>
In abstract, the experimental View Transitions API simplifies visible transitions between varied pages or parts by CSS pseudo-elements, JavaScript, and snapshots of the earlier and present DOM states. It presents a recent probability to boost the perceived efficiency of a web page, minimizing reliance on intricate customized JavaScript and CSS.
Need to be taught extra about Astro, the trendy all-in-one framework to construct quicker, content-focused web sites? Try Unleashing the Energy of Astro, accessible now on SitePoint Premium.
[ad_2]