Transition prevents {#if}{:else}{/if} from being exclusive

[iffy]

Describe the bug
A transition deep within some components makes both the true and false parts of an if/else render on the page.

To Reproduce

1. Go to https://svelte.dev/repl/c902889c05814dd69198661ad49030e1?version=3.8.1
2. Click the three things it tells you to click
3. See that the blue and purple (if and else parts of the if/else in App.svelte) are both showing
   If you remove transition:slide from Scaffold.svelte the problem is no longer there.

Expected behavior
I expect either the true or the false sections of the if statement to show, not both at the same time.

Information about your Svelte project:

• Your browser and the version: Firefox

• Your operating system: macOS

• Svelte version: I don't know? Whatever the REPL is running?

• Whether your project uses Webpack or Rollup: Rollup

Severity
Mildly annoying. I'll remove the transition for now, but would love to be able to use transitions when I release the production app.

Additional context
I'm a newbie and very impressed with Svelte.

[groundedsage]

I think this is a related issue to what I have found.
https://svelte.dev/repl/0d9592db6c0845e6877330748e05875a?version=3.12.1

With mine, the text on the first if statement remains until the prior element has finished the transition.
This was solved by applying another transition to the element without any transitions and making the duration 0.

Expected behavior
I expect elements with a transition to do their respective transitions and all other elements to disappear immediately once their if/else block becomes false.

[Conduitry]

Fixed in 3.21.0 - https://svelte.dev/repl/c902889c05814dd69198661ad49030e1?version=3.21.0

[m1212e]

I still got this issue using SvelteKit. It happens when a nested component has any kind of out transition.

[GautamBose]

I notice this as well in svelteKit, I had to use some annoying boolean logic to work around it (set a separate variable to true when the transition is complete and use that to display the else element)

[abdo643-HULK]

Same problem here with sveltekit

[rjwalters]

I ran into this with transition:fade and was able to fix it either by using a css opacity transition or by marking the transition as local.

https://svelte.dev/tutorial/local-transitions

[wtachau]

Also seeing this with SvelteKit

[bcolloran]

This bug is still present as of

    "@sveltejs/kit": "^1.0.0",
    "svelte": "^3.48.0",

Super annoying bug-- it took me hours to track down that it was a transition like 5 layers of heirarchy below an if that was causing the if to not de-render correctly