Is there a way to not run transitions on client-side navigation?

[Glench]

I'm noticing it looks kind of janky and slows navigation when, for example, a person clicks away from a page to navigate and all the elements that have removal transitions run. I want the elements to run their removal animations in every case except when the user is navigating away from the page. Any ideas about how to do this?

[geoffrich]

Add the |local modifier to your transition: https://svelte.dev/docs#template-syntax-element-directives-transition-fn-transition-events

Local transitions only play when the block they belong to is created or destroyed, not when parent blocks are created or destroyed.

{#if x}
	{#if y}
		<p transition:fade>
			fades in and out when x or y change
		</p>

		<p transition:fade|local>
			fades in and out only when y changes
		</p>
	{/if}
{/if}

There's an issue about making this the default behavior in Svelte 4.

[Glench]

Worked like a charm. Thanks so much for the information!