Persisting a nested framework component in View Transition.

[tough urchin]

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

---

To prevent a child component from animating with the view transition in Astro, you can use the transition:persist directive. This directive allows you to persist components and HTML elements across page navigations.

For example, if you have a parent component that renders a child component, you can add the transition:persist directive to the child component to maintain its state across page navigations.

Here's an example:

<ChildComponent transition:persist />

In this example, the ChildComponent will maintain its state as you navigate to another page that contains the same component. This works for both forwards and backwards navigation.

Please note that not all state can be preserved in this way. The restart of CSS animations and the reload of iframes cannot be avoided during view transitions even when using transition:persist.

You can also manually identify corresponding elements if the child component is in a different component between the two pages. For example:

<ChildComponent transition:name="child-component" transition:persist />

In the new page:

<NewChildComponent transition:name="child-component" transition:persist />

In this example, ChildComponent on the old page corresponds to NewChildComponent on the new page, and they will maintain their state across page navigations.

For more information, you can refer to the Astro documentation on View Transitions (https://docs.astro.build/en/guides/view-transitions/#maintaining-state).

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

@vapid sparrow kapa.ai is still learning and improving, please let us know how it did by reacting below