A blog about software development, written by Daniel Diekmeier. Archive.

Hello! I just added a few transitions to my SvelteKit app. They run when adding or removing an element from a list. The effect is quite nice and I was (once again) impressed by how easy it is to add transitions to Svelte.

This is all it took:

<script>
import { fade } from 'svelte/transition'
</script>

{#each items as item}
  <div transition:fade>
    {item.name}
  </div>
{/each}

Now, whenever the list changes, items fade in or out.

But I noticed that the transitions also run when navigating to a different page. This was a bit unexpected.

This is especially annoying when navigating away, because the navigation only happens after the transition has finished. The navigation is delayed by a few hundred milliseconds while I look at all my list items fading away. That's so weird!

Thankfully, this was easy to fix. I just needed to add a |local modifier to the transition:

{#each items as item}
  <div transition:fade|local>
    {item.name}
  </div>
{/each}

Now I can leave pages immediately, and don’t have to wait for transitions! Incredible!