javascript - svelte 组件中的动画

Question

我正在构建 svelte 的拖放组件，并且想添加动画。 我已经从另一个组件改编了代码，但我无法使其工作，你能帮我查明问题出在哪里吗？我不明白我收到的错误。 这是正在运行的 REPL

https://svelte.dev/repl/acc2c90db2054d89b210f23c026c525e?version=3.16.7

粘贴时显示错误:

in:receive={{ key: index }}
out:send={{ key: index }}
animate:flip={{ duration: 300 }}

进入 REPL 组件的第 130 行

我收到以下错误消息: “使用 animate 指令的元素必须是键控每个 block 的直接子元素 (132:8)”

我尝试删除“wrap”div以将动画一个移动为#each的“直接子级”，但没有帮助

{#if list && list.length}
<div class="cont">
    {#each list as item, index}
    <div class="wrap">
        <div
        data-index={index}
        id={index}
        on:dragstart={() => { return false }}
        on:touchstart={handleMousedown}
        on:touchmove={handleMousemove}
        on:touchend={handleMouseup}
        on:mousedown={handleMousedown}
        on:mousemove={handleMousemove}
        on:mouseover={HandleMouseover}
        in:receive={{ key: index }}
        out:send={{ key: index }}
        animate:flip={{ duration: 300 }}
        class="tobedragged {((index == movingIndex) && moving) ? 'ghost' : ''}" style="top: {m.y}px; left: {m.x}px;">
        list index: {index}<br>
        {item}
        <slot {item} {index} />
    </div>
</div>
{/each}
</div>
{/if}

Answer 1

你拥有的是一个索引的每个 block ，这是行不通的。 每个 block 的键控看起来像这样。 (最好有合适的 key )

    {#each list as item, index (item)}

此外，我不确定您是否需要“接收”和“发送”来完成您想要完成的任务。 animate 指令应该足够了。

看这里 https://svelte.dev/repl/2a310d0e23954ee591f941ff57616364?version=3.16.7