平滑地调整容器大小

我已经使用 svelte 一段时间了，它很棒，但有一件事我一次又一次地遇到。我们来看下面的代码：

<script>
    import {flip} from 'svelte/animate';
    import {fade} from 'svelte/transition';
    
    let list = [];
</script>

<div class="this-div-should-smoothly-change-size">
    {#each list as item (item)}
        <div animate:flip transition:fade>
            {item}
            <button on:click={() => (list = list.filter(e => e !== item))}>X</button>
        </div>
    {/each} 
</div>

<button on:click={() => (list = [...list, Math.random()])}>
    Add
</button>

列表上的翻转动画看起来很棒，但下面的按钮仍然“跳跃”。我想要的只是让按钮移动顺畅。当容器的内容发生变化时，svelte 是否可以使容器在大小之间平滑过渡？

由于svelte编译器的限制，"An element that uses the animate directive must be the immediate child of a keyed each block"，我们不能简单地添加animate:flip按钮。

但如果你可以稍微改变你的 html 结构，你可以解决这个问题。

<script>
import { flip } from 'svelte/animate'
import { fade } from 'svelte/transition'

const buttonPlaceholder = Symbol('buttonPlaceholder')
let list = []
</script>

<div class="this-div-should-smoothly-change-size">
  {#each list.concat(buttonPlaceholder) as item (item)}
    <div animate:flip transition:fade>
      {#if item == buttonPlaceholder}
        <button on:click={() => (list = [...list, Math.random()])}> Add </button>
      {:else}
        {item}
        <button on:click={() => (list = list.filter(e => e !== item))}>X</button>
      {/if}
    </div>
  {/each}
</div>