苗条的动画块过渡

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>

注意我有过渡和动画。过渡有效，但如果翻转动画在那里，则过渡无效：/ 有没有办法正确地做到这一点，以便过渡和动画都能正常工作？提前致谢

Answer 1

如果我正确理解你的问题，你需要这样的东西：

<script>
    import {flip} from 'svelte/animate';
    import { fly } from 'svelte/transition';
    let horizontal = false;
  let next = 1;
    let list = [];
    const addItem = () => list = [next++, ...list];
    const removeItem = number => list = list.filter(n => n !== number);
    const options = {};
</script>

<label>
  Horizontal
  <input type="checkbox" bind:checked={horizontal} />
</label>
<button on:click={addItem}>Add</button>
{#each list as n (n)}
  <div transition:fly="{{ y: 200, duration: 2000 }}" animate:flip={options} class:horizontal class="container">
      <button on:click={() => removeItem(n)}>{n}</button>
  </div>
 {/each}

<style>
    .container {
        width: fit-content; /* a fix */
    }
    .horizontal {
        display: inline-block;
        margin-left: 10px;
    }
</style>

来源：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）

苗条的动画块过渡

Svelte animation blocks transition

svelte

svelte-store

svelte-transition