#astro

2 messages · Page 1 of 1 (latest)

brave duneBOT
#

Hi @icy sequoia. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Astro supports opt-in, per-page view transitions that allow for seamless animations between pages without a full browser refresh. Here are the key points about Astro's view transitions:

  1. View transitions are enabled by adding the <ClientRouter /> component to a page's <head>. This component provides a lightweight client-side router for customizing page transitions.

  2. You can add view transitions to individual pages or site-wide by including the <ClientRouter /> component in a common layout.

  3. Astro provides built-in animation options like fade, slide, and none, which can be customized using the transition:animate directive.

  4. You can control element matching between pages using the transition:name directive.

  5. The transition:persist directive allows you to maintain state for components across page navigations.

  6. Astro handles fallback behavior for browsers that don't support the View Transitions API.

To add view transitions to a page, you can use the following code:

---
import { ClientRouter } from 'astro:transitions';
---
<html lang="en">
  <head>
    <title>My Homepage</title>
    <ClientRouter />
  </head>
  <body>
    <h1>Welcome to my website!</h1>
  </body>
</html>

For more detailed information on implementing and customizing view transitions in Astro, you can refer to the View Transitions guide.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: