How would I create the following animation in svelte?

what I am trying to do: I have a two div elements. When I click on a button, firs div element fades out while the second div element fades in. Both the div elements are at the same position. So it looks like when one is fading out, the other card is fading in to take its place. Example:

What I have already tried: Demo here: /u09gz5ytcs9rl7i

As you can see in the demo, the other card fades in but it is below the first card, and as the first card disappears it snaps in to its place.

How would I create the following animation in svelte?

what I am trying to do: I have a two div elements. When I click on a button, firs div element fades out while the second div element fades in. Both the div elements are at the same position. So it looks like when one is fading out, the other card is fading in to take its place. Example: https://playcode.io/2226396

What I have already tried: Demo here: https://www.sveltelab.dev/u09gz5ytcs9rl7i

As you can see in the demo, the other card fades in but it is below the first card, and as the first card disappears it snaps in to its place.

• svelte

Share Improve this question Follow asked Jan 17 at 16:47 montemonte 1,89322 gold badges1717 silver badges3939 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

This happens because the first element is still in place when the second element is rendered. The first element will only leave the DOM after its animation ends, and the second is rendered before its animation starts.

What you could do is make both elements occupy the same space in the div, while making sure there is a delay between the animations:

<CardContent>

    {#if btn}
        <div transition:fade={{ duration: 1000, delay: btn ? 1000 : 0 }} class="column-start-1">
            <Card>
                <CardContent>
                    First Card
                </CardContent>
            </Card>
        </div>
    {:else}
        <div transition:fade={{ duration: 1000, delay: btn ? 0 : 1000 }} class="column-start-1">
            <Card>
                <CardContent>
                    Second Card
                </CardContent>
            </Card>
        </div>
    {/if}
    
</CardContent>