Изящная анимация блоков перехода

Question

У меня есть такой компонент

      <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>

Обратите внимание, что у меня есть и переход, и анимация. Переход in работает, но переход out не работает, если там включена анимация переворота: / Есть ли способ сделать это должным образом, чтобы работали и переходы, и анимация? заранее спасибо

Answer 1

Если я правильно понимаю вашу проблему, вам нужно что-то вроде этого:

источник: url

Answer 2

Обе анимации уже работают, но одновременно.

Когда вы добавляете задержку ( animation:flip={{ delay:200 }}) вы можете увидеть исчезновение.

      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
(кредиты isarikaya для большинства этого реплики)