Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update view-transitions.mdx #10951

Merged
merged 8 commits into from
Feb 24, 2025
Merged

Update view-transitions.mdx #10951

Changes from 7 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6be6e56
Update view-transitions.mdx
alexgagnon Feb 13, 2025
46c1c1e
add content in fallback section
sarah11918 Feb 14, 2025
22af56d
break up longer paragraph
sarah11918 Feb 14, 2025
303f8c5
Merge branch 'main' into patch-1
alexgagnon Feb 15, 2025
e1d2566
Merge branch 'main' into patch-1
alexgagnon Feb 16, 2025
3062b89
refactor based on discussion
alexgagnon Feb 22, 2025
b631ebd
Merge branch 'main' into patch-1
sarah11918 Feb 24, 2025
97e72d0
better word
sarah11918 Feb 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 11 additions & 3 deletions src/content/docs/en/guides/view-transitions.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ i18nReady: true
import Since from '~/components/Since.astro'
import { Steps } from '@astrojs/starlight/components'

Astro supports **opt-in, per-page, view transitions** with just a few lines of code. View transitions update your page content without the browser's normal, full-page navigation refresh and provide seamless animations between pages.
Astro supports view transitions with just a few lines of code. View transitions update your page content without the browser’s normal, full-page navigation refresh and provide seamless animations between pages. Where [browser support for the View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API#browser_compatibility) is lacking, Astro allows you to [control fallback strategies](#fallback-control) for the best possible experience for all visitors.

Astro provides a `<ClientRouter />` routing component that can be added to a single page's `<head>` to control page transitions as you navigate away to another page. It provides a lightweight client-side router that [intercepts navigation](#client-side-navigation-process) and allows you to customize the transition between pages.

Expand All @@ -23,7 +23,6 @@ Astro's view transitions support is powered by the new [View Transitions](https:
- [Control over fallback behavior](#fallback-control) for browsers that do not yet support the View Transition APIs.
- Automatic support for [`prefers-reduced-motion`](#prefers-reduced-motion).


:::note
By default, every page will use regular, full-page, browser navigation. You must opt in to view transitions and can use them either on a per-page basis or site-wide.
:::
Expand Down Expand Up @@ -445,7 +444,16 @@ You can opt out of router transitions on any individual form using the `data-ast

## Fallback control

The `<ClientRouter />` router works best in browsers that support View Transitions (i.e. Chromium browsers), but also includes default fallback support for other browsers. Even if the browser does not support the View Transitions API, Astro will still provide in-browser navigation using one of the fallback options for a comparable experience.
The `<ClientRouter />` router works best in browsers that support View Transitions (i.e. Chromium browsers), but also includes default fallback support for other browsers. Even if the browser does not support the View Transitions API, Astro's client router can still provide in-browser navigation using one of the fallback options.

Depending on browser support, you may need to explicitly set the `name` or `animate` [`transition` directives](#transition-directives) on the elements you wish to navigate for a comparable experience across all browsers:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Depending on browser support, you may need to explicitly set the `name` or `animate` [`transition` directives](#transition-directives) on the elements you wish to navigate for a comparable experience across all browsers:
Depending on browser support, you may need to explicitly set the `name` or `animate` [`transition` directives](#transition-directives) on the elements you wish to animate for a comparable experience across all browsers:


```astro title="src/pages/about.astro"
---
import Layout from '../layouts/LayoutUsingClientRouter.astro'
---
<title transition:animate="fade">About my site</title>
```

You can override Astro's default fallback support by adding a `fallback` property on the `<ClientRouter />` component and setting it to `swap` or `none`:

Expand Down