Animations in svelte component

Question

I'm building drag'n'drop component for svelte and would like to add animations. I have adapted code from another component, but I cannot make it to work, could you help me pinpoint where the problem is? I don't understand error im getting. here is working REPL

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

error shows when I paste:

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

into line 130 of component in REPL

following error message i get: "An element that use the animate directive must be the immediate child of a keyed each block (132:8)"

i have tried to remove "wrap" div to move animate one as "direct child" of #each but it didnt help

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

JakeDK JakeDK · Accepted Answer · 2019-12-27T08:37:51

What you have is an indexed each block, which won't work. A keyed each block looks like this. (preferably with a proper key)

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

Also, I'm not sure you need "receive" and "send" for what you're trying to accomplish. The animate directive should be enough.

Have a look here https://svelte.dev/repl/2a310d0e23954ee591f941ff57616364?version=3.16.7

Animations in svelte component

1 Answers