mirror of
https://github.com/withastro/astro.git
synced 2024-12-30 22:03:56 -05:00
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>
62 lines
2.2 KiB
Markdown
62 lines
2.2 KiB
Markdown
---
|
|
'astro': minor
|
|
---
|
|
|
|
Built-in View Transitions Support (experimental)
|
|
|
|
Astro now supports [view transitions](https://developer.chrome.com/docs/web-platform/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:
|
|
|
|
```js
|
|
import { defineConfig } from 'astro/config';
|
|
|
|
export default defineConfig({
|
|
experimental: {
|
|
viewTransitions: true,
|
|
},
|
|
})
|
|
```
|
|
|
|
This enables you to use the new APIs added.
|
|
|
|
#### <ViewTransitions />
|
|
|
|
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__
|
|
|
|
```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.
|
|
|
|
```astro
|
|
<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:
|
|
|
|
```astro
|
|
---
|
|
import { slide } from 'astro:transition';
|
|
---
|
|
<header transition:animate={slide({ duration: 200 })}>
|
|
```
|
|
|
|
#### Continue learning
|
|
|
|
Check out the [client-side routing docs](https://docs.astro.build/en/guides/client-side-routing/) to learn more.
|