#View Transition API fallback control

4 messages · Page 1 of 1 (latest)

indigo dagger
#

Hi there, I read the documentation about the fallback support with the three options: animate, swap and none. But I don't really understand the use of swap. When should I use it? What are the advantages and disadvantages? And what is the difference between swap and none?

cobalt peakBOT
#

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

#

The fallback property on the <ViewTransitions /> component in Astro allows you to control how Astro handles view transitions in browsers that do not support the View Transitions API. The three options you can set for the fallback property are animate, swap, and none.

  • animate (default, recommended): With this option, Astro will simulate view transitions using custom attributes before updating page content. This is the recommended option as it provides a comparable experience to browsers that support the View Transitions API.

  • swap: When you set the fallback property to swap, Astro will not attempt to animate the page. Instead, the old page will be immediately replaced by the new one. This option could be beneficial when you want to avoid the overhead of animation, especially for heavy-weight elements that do a lot of work in their initial stages.

  • none: If you set the fallback property to none, Astro will not do any animated page transitions at all. Instead, you will get full page navigation in non-supporting browsers. This is essentially a full page refresh, which could be slower and provide a less seamless user experience compared to the swap and animate options.

Here is an example of how to use the fallback property:

---import { ViewTransitions } from 'astro:transitions';---<title>My site</title>
<ViewTransitions fallback="swap" />

In summary, the choice between swap and none depends on the specific needs of your application and the user experience you want to provide. If you want to provide a seamless transition between pages without animation, you can use swap. If you prefer a full page refresh, you can use none.