sveltesvelte-storesvelte-transition

Svelte animation blocks transition

I have a component that is build like this

<ul class="space-y-3 flex-col items-end justify-end absolute bottom-6 left-6 right-6 overflow-hidden">
    {#each $chatDisplayQueue as chatEvent (chatEvent.id)}
        <div in:fly={{y:150,duration: 200}} out:fade={{duration: 200}} animate:flip={{duration: 200}}>
            <ChatMessage event={chatEvent}/>
        </div>
    {/each}
</ul>

Notice i have both a transition and an animation. The in transition works but, the out transition does not work if the flip animation is on there :/ Is there a way to do this properly so that both transitions and the animation works? Thanks in advance

Solution

  • Both animation already work, but at the same time.

    When you add a delay (animation:flip={{ delay:200 }}) you're able to see the fade.

    let delay = 0
function addItem() {
  delay = 0;
  ...
}
function removeItem() {
  delay = 200;
  ...
}
</script>

...
<div animation:flip={{ delay }}>...

    https://svelte.dev/repl/52a1d8564bfa4c9da6dc9c3a570109ed?version=3.14.1
    (credits to isarikaya for most this repl)