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 行

我收到以下错误消息： "An element that use the animate directive must be the immediate child of a keyed each block (132:8)"

我曾尝试删除 "wrap" div 以将动画移动为 #each 的 "direct child" 但它没有帮助

{#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)}

此外，我不确定您是否需要 "receive" 和 "send" 来完成您想要完成的任务。动画指令应该足够了。

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

svelte 组件中的动画

Animations in svelte component

javascript

svelte