Crossfade transition bug when element replaces another one.

[oreilles]

Having two elements A and B, both using the crossfade transition on in and out.

• When A goes elsewhere than B, the crossfade transition works as expected.
• When A goes where B is, the crossfade fallback is applied to A's origin element, and B instantly turns into A without any transition.
• When A and B swap positions, both elements instantly turns into the other without any transition.

Replicate:
https://svelte.dev/repl/92dca5bdbeef4b939a10eb426b5807e5?version=3.20.1

[oreilles]

Changing the code from :

<div class=grid>
    {#each grid as piece}
    <div class=cell>
        {#if piece}
            <div class=piece
             in:receive={{key:piece}}
             out:send={{key:piece}}
            />
        {/if}
        </div>
    {/each}
</div>

to:

<div class=grid>
    {#each grid as piece}
    <div class=cell>
        {#if piece}
            {#each [piece] as piece(piece)}
                <div class=piece
                 in:receive={{key:piece}}
                 out:send={{key:piece}}
                 />
            {/each}
        {/if}
    </div>
    {/each}
</div>

Fixes the bug.
https://svelte.dev/repl/da8f3f844c07429c8a8fe401adde3092?version=3.20.1

What I understand is that the receive transition is not triggered because Svelte doesn't make any distinction between elements A and B when one replaces the other.

There should probably be a generic way to identify blocks with keys for that type of situations, without having to hack the keyed each block ?
Follow up: #4593