Persisting Transitions

[minor wyvern]

https://stackblitz.com/edit/withastro-astro-xjqwxn?file=src%2Flayouts%2FLayout.astro

I have transitions:persist on my header, but on Firefox, when I click a link, you can see from the CSS transitions that the header remounts on route change. How can I prevent this? I understad that FF doesn't support the View Transitions API, but shouldn't the persisting of components work nontheless?

[forest haven]

Hi @minor wyvern 👋 , the effect you see is independent of the browser you use. It is a (search in page for) "known limitation" of https://docs.astro.build/en/guides/view-transitions/#maintaining-state.

The simplest way to resolve this is to define a swap function (search for "swap function" on the same page) that does not replace the whole body during view transitions but keeps the header in place and only replaces the other parts of the page.

The has a component for doing just that: http://events-3bg.pages.dev/library/ReplacementSwap/#why-would-i-use-this-component.

[minor wyvern]

Thank you so much! !solved

[forest haven]

(Sorry, bag link was broken)

[quartz siren]

If your issue is resolved, please help by doing the following two steps:

1. From the ellipses (3-dot menu) in the top-right corner of the post (not the first message), edit the tags to include the Solved tag.
2. From the same ellipses, select Close Post.
   Your post will still be available to search and can be re-opened simply by replying in it. Closing a post moves it down with older posts, so we can more easily focus on issues that still need to be resovled.
   Thank you for your help!

[minor wyvern]

just one more question, what is TRANSITION_BEFORE_SWAP? i couldnt find it in the astro docs, do i need this when creating custom transitions?

[forest haven]

This is just a constant for the event name:

export declare const TRANSITION_BEFORE_SWAP = "astro:before-swap";

You can completely ignore it and just use

document.addEvenListener("astro:before-swap", () => {...})

It is meant to save you from typos when adding listeners.