Transitioning when slot element changes does not update slot element

[jf908]

Describe the bug

If a transition happens on an element that contains a slot, the slot does not properly update if it is rendered again immediately after the transition ends.

To Reproduce

https://svelte.dev/repl/46ba49b1c588454f8f4899b4b47b8df0?version=3.12.0

In the repl, 1. is an example of this bug, 2. is an example showing how if the component is transitioned out completely then the slot is updated properly.

Expected behavior

In the repl, 1. should fade out "Foo" and fade in "Bar" rather than fade out "Foo" and fade in "Foo".

Information about your Svelte project:

Chrome v76
Windows 10
Svelte v3.12.0
See REPL

Severity

Not too important as it is a corner case but additional context explains why fixing it may be useful.

Additional context

I discovered this bug because I was trying to create page transitions in sapper but could not find a elegant way of doing so which resulted in me trying this workaround and finding this bug.

The main problem is that there is no way of adding a transition when a <slot> changes unless you add transitions to the slot contents which is a problem in sapper because there isn't an easy way of wrapping every page component to include intro and outro transitions.

Fixing this bug would allow the parent component to add any kind of transitioning to <slot> elements.

[fezproof]

I am having the same problem with slots. I thought awaiting the tick could work but that didnt either. This isnt a huge problem for now, but I can see it being a great feature if this gets fixed in the future

[fezproof]

Ok I found a weird solution to this. If you have the show flag toggle between 2 slots rather than hide and show one it works.

RPEL: https://svelte.dev/repl/634b9ef186f8441e8c49cf6b5725772f?version=3.12.0

I don't know about the performance around this change, but it woks in Sapper as well. This results in fairly clean page transitions

<script>
  import { scale } from "svelte/transition";
  import Nav from "../components/Nav.svelte";

  export let segment;
  const timeout = 300;
  let show = true;

  const change = () => {
    show = !show;
  };

  $: change(segment);
</script>

<style>
  main {
    position: relative;
    max-width: 56em;
    background-color: white;
    padding: 2em;
    margin: 0 auto;
    box-sizing: border-box;
  }
</style>

<Nav {segment} />

{#if show}
  <main
    in:scale={{ duration: timeout, delay: timeout }}
    out:scale={{ duration: timeout }}>
    <slot />
  </main>
{:else}
  <main
    in:scale={{ duration: timeout, delay: timeout }}
    out:scale={{ duration: timeout }}>
    <slot />
  </main>
{/if}

[Conduitry]

This is finally fixed in 3.38.0 - https://svelte.dev/repl/46ba49b1c588454f8f4899b4b47b8df0?version=3.38.0

[AbstractFruitFactory]

@Conduitry

This seems to cause a weird behavior if you render a svelte component in the slot

see:
https://svelte.dev/repl/4d4bf30a7e6c437d8f71a6f06f8626d5?version=4.2.7

If you remove the Text component, it works fine. But when using a component, it is being rendered even when the if condition doesn't hold.

[roberrrt-s]

I've just had the exact same problem and managed to solve it by doing:

<section>

    {#if $activeChat !== null}
        <Messages />
    {:else}
        <Welcome />
    {/if}

    <!--
        This is the weirdest thing ever, but it happens because of this:
        
    -->
    {#if true}
        <Chatbar />
    {/if}

</section>

I've had issues when using view transitions, for some reason, transitioning away from this +page.svelte made it wait for half a second, and then instantly went from a->b without transition, now it works as intended.