Svelte transition impacts navigation

Describe the bug If a component used in a route has a transition applied, it will delay navigation and potentially create UI errors.

To Reproduce In a brand new installation, create a new component e.g. Linker.svelte and include it in the index route.

<!-- src/lib/Linker.svelte -->
<script>
  import { fade } from "svelte/transition";
  let showImage = false;
</script>

<div
  on:mouseenter={() => {
    showImage = true;
  }}
  on:mouseleave={() => {
    showImage = false;
  }}>

  <h1>Wow hi!</h1>
  <a href="/about">About</a>
  {#if showImage}
    <img
      transition:fade={{ duration: 2000 }}
      src="https://picsum.photos/20"
      alt="" />
  {/if}
</div>

<!-- src/routes/index.svelte -->
<script>
  import Linker from "../lib/Linker.svelte";
</script>

...

<Linker />
<h1>Great success!</h1>

Moving the cursor on top of the link, a small picture will slowly fade in. Once clicking on the link, the image will slowly fade out again, but the /about page content will already be appended to the <slot /> and visible in the bottom. If the user moves the cursor back on top of the link while it is fading out, it will just fade in again and prevent the component from being removed completely - causing UI errors.

Expected behavior When navigating, default behaviour should be to just switch route. No delays nor attempts to finalise transitions or to show both routes in the <slot /> at the same time.

Information about your Sapper Installation:

• Issue appears in both Chrome and Safari from what I have tested, but I expect this to be the same across all browsers.

• Using iMac 2011 with OSX Mojave

• Running in localhost

• Current latest release v0.27.4

• Svelte v3

• dynamic application

• Using Rollup

Severity Mainly it is just annoying, and I can’t really find a workaround to prevent it unless I just remove the transition from the image having it appear and disappear instantly.

Additional context Maybe a modifier to the transition could be an idea. We currently have modifiers like once or preventDefault on click events. Maybe add a transition:fade|ignoreRoute={{duration: 200}} or the quite opposite - having the developer purposely asking for route specific transition.

[mustafa0x]

Does |local not fix this?

https://svelte.dev/docs#Transition_events

[janwillemtulp]

I’m going to close this since transitions are working as intended (Svelte won’t remove elements until transitions have completed), and |local is the way to get the desired outcome. I do acknowledge that some behaviour around transitions is a little counterintuitive though — it’s on our list of things to revisit for Svelte 4, when we have the opportunity to make breaking changes.

Why is |local not the default behaviour and then you have to set the opposite, if desired (wait until something else is complete)?