Question

我正在构建拖放组件，以使其更苗条，并希望添加动画。我已经从另一个组件改编了代码，但是我无法使其正常工作，您能帮我确定问题出在哪里吗？我不明白错误正在得到。这是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

苗条组件中的动画

1 个答案: