How to persist a nested nav inside a framework component with View Transitions?

[steel horizon]

A bit complicated but a part of my site is a SolidJS SPA, the issue is that one of the routes that has a nav sidebar, however clicking a link inside that nav activates the view transition animation which also takes the nav with it so it slides in and out like the rest of the content. I would like the nav to persist but since it is not inside of a .astro file I can't use transition:persist.

It seems like my only option is to have the astro page that renders the SPA to not animate at all with ViewTransitions and instead try to mimick it inside the SPA using the DOM events that astro emits like before-preparation etc. which will give me the direction of the navigation so I can slide in or out the content.

Is there any documentation on how Astro does it in browsers that don't support the View Transitions API?

The documentation mentions a fallback.

https://docs.astro.build/en/guides/view-transitions/#fallback-control

[versed wadi]

Hi @steel horizon
Let me first answer your question:

Is there any documentation on how Astro does it in browsers that don't support the View Transitions API?
This page has a bit of information, on how the fallback mode works for browsers that do not have native view transition support.

But i'd also like to ask back, whether you could provide a link to your page. Maybe I can come up with a simpler approach if I could better understand what you try to accomplish.

[gloomy pike]

Could you separate the nav out from the solid component into its own solid component? Then you could persist it within an Astro page that wraps them both

[steel horizon]

I haven't deployed it yet so can't share.

I'll try to give a clearer picture of the issue.

My app is 90% static and then in the app.astro page I render a solidJS SPA so it is a <App /> component with client:only="solid-js" directive. And that component is wrapped with my BaseLayout.astro, which has <ViewTransitions/> in the head and transition:animate="none" on the html element. Then I have a main tag which has the transition:animate="slide" directive which then renders the <slot />.

My <App /> component uses solid-router to render four different components depending on the path.
One of the routes renders a sidebar nav, to simplify the example you could think of it as a blog post and then a sidebar nav with links to the latest 5 blog posts on the right. When I click a link on the sidebar I want it to persist rather than slide in with the blog post.

I obviously can't use any of the transition directives on this as it's a SolidJS component.

One way I did get it to work was by bringing that sidebar component out of the SPA and putting it next to the <App /> component which means that it is now in a .astro file and I can use the transition:persist directive and then using SolidJS' <Show> component can make it render only when the path contains /blog/post. But this causes weird behaviour with the sidebar rendering multiple versions of itself at the same time.

So I think the only way to get it to work correctly is to stop the <App /> page from animating and then mimick Astro's page transitions within the SPA myself.

I looked at the documentation that you linked and it said that adding data-astro-transition-persist="x" "can be helpful in places where the transition directives are not recognized e.g. in *.mdx and *.html files or framework components". So I added data-astro-transition-persist="sidebar" but it still animates with the rest of the page.

I'll see if I'm able to manually mimick Astro's transitions inside my SPA using the documentation you linked

[steel horizon]

It is its own component but it's rendered inside of a Solid component. Astro components can't be imported into framework components. And passing it as a slot won't work either because it needs to render its own children and as far as I'm aware I can't do something like <Props.AstroSlot>{children go here}</Props.AstroSlot/>.

[gloomy pike]

This might be beyond me 😅

[versed wadi]

Hi @steel horizon!

I'll see if I'm able to manually mimick Astro's transitions inside my SPA using the documentation you linked
before you try that, you should try the following: on the element, where you added data-astro-transition-persist="x", please also add style="view-transition-name: y"; That should take the element out of the slide.

[steel horizon]

Thanks for your suggestion @versed wadi . I'm assuming "y" can just be anything like "blognav" but different to the data-astro-transition-persist value which I have as "sidebar"?

If so I tried that but the sidebar still animates with the view transition animation. I also tried having them both set to "sidebar".

I also tried transition scope like this part of the docs show https://events-3bg.pages.dev/jotter/astro/directives/#transitionname but I'm unsure how Astro encodes the name.

"Normally you should not set the view-transition-name CSS property directly in Astro. This will not work with the fallback simulation of view transitions and you will have to take care of the name encoding yourself".

Maybe that's why it didn't work?

I'm not sure how to encode it like Astro does or why it needs to be encoded in the first place.

[versed wadi]

😏 Debugging is particularly difficult if you have no code to try out. If you make the repo accessible, or have a minimal reproduction of the behavior that I can take a closer look at, I'd be happy to try to help.

[steel horizon]

Sure, I'll try and get something up. Thanks for your help so far.

[steel horizon]

Uploaded a quick demo to https://astro-testing-24g.pages.dev

So, the index page just has a link which goes to a blog page and the blog content + the sidebar slide in which is fine, then if you click a link in the sidebar both the next blog post and the sidebar slide in again but I want the sidebar to remain and not animate.

My blog/:id route is wrapped with a BlogLayout.jsx which is just the blog content which is {props.children} and then the sidebar.

I have the <ViewTransitions /> component inside the head of my BaseLayout.astro component which also has a <main transition:animate="slide"> and then a <slot /> inside that main tag.

[steel horizon]

My app.astro page just has the BaseLayout wrapping my Root.jsx component which has a Solid Router and looks like this:

import {Router, Route} from '@solidjs/router'
import BlogPageLayout from './BlogPageLayout'
import BlogPage from './BlogPage'

export default function Root() {
    return (
        <Router>
            <Route path="/app/blog/:id" component={BlogPageLayout}>
            <Route path="/" component={BlogPage} />
            </Route>
        </Router>
    )
}

Then my BlogPageLayout.jsx which has the sidebar that I tried those astro-data attributes on and it looks like this:

export default function BlogPageLayout(props) {
    return (
        <div>
            <div>{props.children}(This is the blog post content)</div>
            <aside data-astro-transition-persist="sidebar" style="view-transition-name: sidebar-nav;">
                <h2>This is the sidebar and I want it to persist when navigating to another blog post using the links below and NOT to animate.</h2>
                <nav>
                    <A href="/app/blog/2">Blog Post 2</A>
                    <A href="/app/blog/3">Blog Post 3</A>
                    <A href="/app/blog/4">Blog Post 4</A>
                    <A href="/app/blog/5">Blog Post 5</A>
                    <A href="/app/blog/6">Blog Post 6</A>
                </nav>
            </aside>
        </div>
    )
}

If it's not possible to prevent the sidebar from animating then if I remove the <main transition:animate="slide"> so that the page that renders my SPA has no animations, is there any data-astro attributes I can add to the blog content to make that slide?

Thanks for your help.

[versed wadi]

should i set up a new project from this?
It would be much easier if you could share the repo

[steel horizon]

I can set up a repo if you need that. I thought the demo would be enough to see what was happening.

[steel horizon]

@versed wadi we put up the repo https://github.com/Athaza715/astro-demo/ after building the site instead of running the astro preview you need to run 'npx wrangler pages dev ./dist' without this the SPA won't work as it uses redirects.

[versed wadi]

Thank you so much!

[versed wadi]

Hi @steel horizon please persist the app itself:

<Root client:only="solid-js" transition:persist="app"/>

and remove the data-astro-transition-persist="sidebar" from your sidebar.

You will then see that the view-transition-name you gave to the sidebar keeps it in place (without further styling this defines a morph animation to itself) while the rest slides.

The problems you were facing mainly resulted from client:only, which gives you a basically blank page with a script. The hydration comes too late for the view transition to see your transition names and data attributes on the next page.

Note that morph animations only work for browsers with native view transition support.

[steel horizon]

@versed wadi thanks so much for that. It works keeping the sidebar in place. But it messes with the Solid Router. The first blog post works fine when you navigate from the home page but when you click on a link from the sidebar eg Blog Post 2, then that loads Blog Post 1 again, then clicking Blog Post 3 loads blog post 2 and so on, it seems the Solid Router is one navigation behind, you can see this by looking at the number in the url and then the heading showing which blog post is being shown in the actual blog post, it's always one path behind. I remember having a similar issue when I first tried adding the SPA I put transition:persist on it and it was the same problem.

Our site has a significant amount of Firefox users too which doesn't support view transitions yet. I may look into SwupJS to see if that can work or else I might try removing the slide from the app.astro page altogether and try to mimick it using Solid's transition group.

Thanks a lot for your help.

[versed wadi]

Oh, sorry! I did a quick test, but when I saw that the headings change, I didn't look any further. I also did some more experiments with Firefox, but with no useful results. It might indeed be the less nerve-wracking approach to move the articles with an animation library or with the Animation API.