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 指令的元素必须是每个键控块的直接子元素 (132:8)”

我试图删除“包裹”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

你所拥有的是一个索引的每个块，这是行不通的。一个键控的每个块看起来像这样。（最好有合适的钥匙）

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

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

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