svelte {#key} doesn't destroy old components when a transition started

Describe the bug

A {#key} block should destroy the component of the previous key. This works most of the time, but when an intro is started the components is not destroyed or removed from the dom.

To reproduce:

Minimal example to reproduce the bug:

<!-- App.svelte -->
<script>
  import Child from './Child.svelte'
  let index = 0
</script>
{#key index}
  <Child on:click={() => {index++}} />
{/key}

<!-- Child.svelte -->
<script>
  import { fade } from 'svelte/transition'
  import { createEventDispatcher } from 'svelte'
  const dispatch = createEventDispatcher()	
  let visible = false
</script>
<button on:click={() => { visible = true; dispatch('click') }}>Next</button>
{#if visible} <div transition:fade /> {/if}

A REPL to see the bug in action, just press the "Next" button.

Expected behavior Intro animations should be canceled, outros should start and when the outros are completed the component should be destroyed.

Information about your Svelte project: System: OS: macOS 11.2.3 Browsers: Chrome: 89.0.4389.90 Firefox: 87.0 Safari: 14.0.3 Svelte: 3.36.0

Severity This is breaking pages, showing weird duplicate components.

Mar 30 '21 19:03 bfanger

Duplicate of #6150

Mar 30 '21 20:03 Kapsonfire

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Jun 28 '21 20:06 stale[bot]

Bug still prevalent in the current version: https://svelte.dev/repl/617dd85dcc0649b09a90dd5a1832a981?version=3.38.3

Jun 29 '21 08:06 bfanger

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Dec 26 '21 10:12 stale[bot]

Bug still here https://svelte.dev/repl/617dd85dcc0649b09a90dd5a1832a981?version=3.44.3

Dec 27 '21 08:12 bfanger

Came here to report the same...