I have a .astro file that contains my single page app. By doing this the transiction should work as expected ?
<body class="bg-background">
<ClientRouter />
<WholeApp client:only />
</body>
#View transiction works on client side ?
austere atlas
nocturne elkBOT
Hi @austere atlas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
Yes, view transitions in Astro work on the client side. However, based on the information provided in the knowledge sources, there are a few important points to consider regarding your implementation:
- The
<ClientRouter />component should be placed in the<head>of your document, not in the<body>. According to the View Transitions guide, you should add it like this:
<html lang="en">
<head>
<title>My Homepage</title>
<ClientRouter />
</head>
<body>
<!-- Your content here -->
</body>
</html>
-
View transitions are designed to work with multiple pages in an Astro site, not necessarily with a single-page application (SPA) setup. The
<ClientRouter />component enables client-side routing between different pages in your Astro site. -
If your entire application is contained within a single
<WholeApp />component that's rendered withclient:only, it's not clear how view transitions would apply, as they're meant to animate between different pages or routes. -
For view transitions to work as expected, you typically need multiple
.astropages in your project, each with the<ClientRouter />component in the<head>.
If you're building a true SPA and want to handle transitions within that single page, you might need to implement your own transition system within your <WholeApp /> component, as Astro's view transitions are designed for multi-page applications.