6a12fcecb0
* Basic support * Add the fade transition * Move CSS into a separate file * Add transition name * View Transitions changeset * Replace the boolean transition with 'morph' * Update to use `transition:animate` * Use head propagation * Move CSS into a separate file * Add builtin animations and namespaced module * Misquote * Remove unused code * Add automatic prefetching to the View Transitions router * Use a data attribute for back nav animations * Use [data-astro-transition] * Add view transitions to examples * Wait on the HTML response before calling startViewTransition * Updated stuff * Update the compiler * Fix * Fallback support * Properly do fallback * Simplify the selectors * Put viewTransitions support behind a flag * Upgrade the compiler * Remove unused import * Add tests * Use an explicit import instead of types * Fix case where the click comes from within nested content * Fix linting * Add a test for the back button * Prevent glitch in fallback * Do not combine selectors * Fallback to MPA nav if there is an issue fetching * Fallback swap if there are no animations * Update packages/astro/src/@types/astro.ts Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update packages/astro/components/ViewTransitions.astro Co-authored-by: Emanuele Stoppa <my.burning@gmail.com> * Update packages/astro/components/ViewTransitions.astro Co-authored-by: Emanuele Stoppa <my.burning@gmail.com> * Update the changeset * PR review changes * Update more based on review comments. * Update the updateDOM default * Pass in transitions options to the compiler * Update broken tests * Update .changeset/silly-garlics-live.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update .changeset/silly-garlics-live.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update .changeset/silly-garlics-live.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * Update .changeset/silly-garlics-live.md Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> * h2 -> h4 * Upgrade to stable compiler * Remove exp redirects from sitemap * Remove usage from examples * Remove example updates --------- Co-authored-by: Sarah Rainsberger <sarah@rainsberger.ca> Co-authored-by: Emanuele Stoppa <my.burning@gmail.com>
2.2 KiB
| astro |
|---|
| minor |
Built-in View Transitions Support (experimental)
Astro now supports view transitions through the new <ViewTransitions /> component and the transition:animate (and associated) directives. View transitions are a great fit for content-oriented sites, and we see it as the best path to get the benefits of client-side routing (smoother transitions) without sacrificing the more simple mental model of MPAs.
Enable support for view transitions in Astro 2.9 by adding the experimental flag to your config:
import { defineConfig } from 'astro/config';
export default defineConfig({
experimental: {
viewTransitions: true,
},
})
This enables you to use the new APIs added.
This is a component which acts as the router for transitions between pages. Add it to the <head> section of each individual page where transitions should occur in the client as you navigate away to another page, instead of causing a full page browser refresh. To enable support throughout your entire app, add the component in some common layout or component that targets the <head> of every page.
CommonHead.astro
---
import { ViewTransitions } from 'astro:transitions';
---
<meta charset="utf-8">
<title>{Astro.props.title}</title>
<ViewTransitions />
With only this change, your app will now route completely in-client. You can then add transitions to individual elements using the transition:animate directive.
Animations
Add transition:animate to any element to use Astro's built-in animations.
<header transition:animate="slide">
In the above, Astro's slide animation will cause the <header> element to slide out to the left, and then slide in from the right when you navigate away from the page.
You can also customize these animations using any CSS animation properties, for example, by specifying a duration:
---
import { slide } from 'astro:transition';
---
<header transition:animate={slide({ duration: 200 })}>
Continue learning
Check out the client-side routing docs to learn more.