每个块外的动画元素

Question

我有一个简单的“待办事项列表”风格的应用程序，它使用

{#each}

块来呈现

<Item />

元素的列表。我正在使用 Svelte 的

animate

指令在添加或删除项目时使列表项目向上或向下滑动。这很好用。

问题是我还有一个

<Footer />

组件固定在项目列表的底部。因为这是在每个块之外，所以它没有动画效果，所以当添加或删除项目时它会立即上下跳动而不是与上面的列表项目同步移动。

我尝试将

animate

指令添加到

<Footer />

但根据 Svelte 文档，动画只能用于每个块的直接子元素，因此这不起作用。

有没有办法在 Svelte 中使用动画来做到这一点？如果没有，可以使用 vanilla CSS/JS 实现这种效果吗？

REPL 示例（动画持续时间放慢以更好地显示问题）

<div class="items-container">
    {#each $items as item (item.id)}
        <div animate:flip={{ duration: 200 }}>
            <Item id={item.id} text={item.text} />
        </div>
    {/each}
    <Footer />
</div>