I have a parent component that has 2 children. Each child has a dndzone in it. With each child I am passing an array of objects. I have two arrays of objects, "pickPlateIds" and "quePlateIds". Each child takes this component and makes a list of dnd items. I have a function in each child which will remove the object from the list it is in and add it to the other. When these functions run it just removes it from the one dnd zone and adds it to the other without any animation. Is there a way I can animate this so when I run this function it will make the dnd object flip from one dnd zone to the other? It does animate properly when I drag and drop, I just want it to animate when the function runs.
Here is my parent:
<script> // @ts-nocheck import { onMount } from 'svelte'; import { dndzone } from 'svelte-dnd-action'; import { darkModeStore } from '$lib/store'; import { flip } from 'svelte/animate'; import PickList from '$lib/pickList.svelte'; import QueList from '$lib/queList.svelte'; $: pickPlateIds = [ { id: 1, name: '12345' }, { id: 2, name: '54321' }, { id: 3, name: '67890' }, { id: 4, name: '09876' } ]; $: quePlateIds = [{ id: 5, name: '12345' }]; let newIndex = 0; const flipDurationMs = 200; function handleAdd() { const input = document.getElementById('inputPlateId'); const plateId = input.value.trim(); if (plateId) { pickPlateIds = [...pickPlateIds, { id: newIndex++, name: plateId }]; input.value = ''; } } function handleRemoveAll() { pickPlateIds = []; quePlateIds = [] } function handleRemovePick(id) { pickPlateIds = pickPlateIds.filter((item) => item.id !== id); } function handleRemoveQue(id) { quePlateIds = quePlateIds.filter((item) => item.id !== id); } onMount(() => { newIndex = pickPlateIds.length + quePlateIds.length + 1; }); function handleKeyDown(event) { if (event.key === 'Enter') { handleAdd(); } } // Function to move an item from pickPlateIds to quePlateIds function moveToQueue(id) { const itemToMove = pickPlateIds.find((item) => item.id === id); if (itemToMove) { quePlateIds = [...quePlateIds, itemToMove]; pickPlateIds = pickPlateIds.filter((item) => item.id !== id); } } // Function to move an item from quePlateIds to pickPlateIds function moveToPick(id) { const itemToMove = quePlateIds.find((item) => item.id === id); if (itemToMove) { pickPlateIds = [...pickPlateIds, itemToMove]; quePlateIds = quePlateIds.filter((item) => item.id !== id); } }</script><div class="mt-10 dark:text-white h-screen"><div class="input flex items-center justify-center"><input class="shadow appearance-none border rounded py-2 px-3 text-gray-700 focus:outline-none focus:shadow-outline dark:text-white dark:bg-gray-700" id="inputPlateId" type="text" placeholder="Enter Plate ID" on:keydown={handleKeyDown} /><button class="bg-green-800 hover:bg-green-600 text-white font-bold py-1 px-3 rounded-full disabled:opacity-25 ml-1" on:click={handleAdd}>Add</button><button class="bg-red-800 hover:bg-red-600 text-white font-bold py-1 px-3 rounded-full disabled:opacity-25 ml-1" on:click={handleRemoveAll}>Remove All</button></div><div class="h-screen flex justify-center"><div class="border w-1/4 h-3/4 flex flex-col text-center items-center rounded-lg mt-4 mr-4 overflow-auto"><PickList bind:items={pickPlateIds} {handleRemovePick} {flipDurationMs} {moveToQueue}/></div><div class="border w-1/4 h-3/4 flex flex-col text-center items-center rounded-lg mt-4 overflow-auto"><QueList bind:items={quePlateIds} {handleRemoveQue} {flipDurationMs} {moveToPick} /></div></div></div>Child one
<script> /** * @type {any} */ export let items; export let handleRemovePick; export let flipDurationMs; export let moveToQueue; import { flip } from 'svelte/animate'; import { darkModeStore } from './store'; import { dndzone } from 'svelte-dnd-action'; // drag and drop functions /** * @param {{ detail: { items: any; }; }} e */ function handleItemMove(e) { items = e.detail.items; } /** * @param {{ detail: { items: any; }; }} e */ function handleMoveComplete(e) { items = e.detail.items; // need to save list to redis after completed console.log(items); }</script><div class="sticky top-0 bg-gray-600 w-full p-2"> Pick List <button class="bg-red-800 hover:bg-red-600 text-white font-bold py-1 px-3 rounded-full disabled:opacity-25 text-sm absolute right-12" on:click={() => (items = [])}>Clear</button></div><div class="w-96 mt-4 h-screen" use:dndzone={{ items, flipDurationMs, dropTargetStyle: {} }} on:consider={handleItemMove} on:finalize={handleMoveComplete}> {#each items as item (item.id)}<div class="{$darkModeStore ? 'bg-gray-500' : 'border-gray-300'} border rounded-md py-2 px-3 m-2 flex justify-between" draggable="true" id={item.id} animate:flip={{ duration: flipDurationMs }}><span>{item.name}</span><div><button class="bg-green-800 hover:bg-green-600 text-white font-bold py-1 px-3 rounded-full disabled:opacity-25" on:click={() => moveToQueue(item.id)}>Move</button><button class="bg-red-800 hover:bg-red-600 text-white font-bold py-1 px-3 rounded-full disabled:opacity-25" on:click={() => handleRemovePick(item.id)}>Remove</button></div></div> {/each}</div>Child 2
<script> /** * @type {any} */ export let items; export let handleRemoveQue; export let flipDurationMs; export let moveToPick; import { flip } from 'svelte/animate'; import { darkModeStore } from './store'; import { dndzone } from 'svelte-dnd-action'; // drag and drop functions /** * @param {{ detail: { items: any; }; }} e */ function handleItemMove(e) { items = e.detail.items; } /** * @param {{ detail: { items: any; }; }} e */ function handleMoveComplete(e) { items = e.detail.items; // need to save list to redis after completed console.log(items); }</script><div class="sticky top-0 bg-gray-600 w-full p-2"> Que List <button class="bg-red-800 hover:bg-red-600 text-white font-bold py-1 px-3 rounded-full disabled:opacity-25 text-sm absolute right-12" on:click={() => (items = [])}>Clear</button></div><div class="w-96 mt-4 h-screen" use:dndzone={{ items, flipDurationMs, dropTargetStyle: {} }} on:consider={handleItemMove} on:finalize={handleMoveComplete}> {#each items as item (item.id)}<div class="{$darkModeStore ? 'bg-gray-500' : 'border-gray-300'} border rounded-md py-2 px-3 m-2 flex justify-between" draggable="true" id={item.id} animate:flip={{ duration: flipDurationMs }}><span>{item.name}</span><div><button class="bg-green-800 hover:bg-green-600 text-white font-bold py-1 px-3 rounded-full disabled:opacity-25" on:click={() => moveToPick(item.id)}>Move</button><button class="bg-red-800 hover:bg-red-600 text-white font-bold py-1 px-3 rounded-full disabled:opacity-25" on:click={() => handleRemoveQue(item.id)}>Remove</button></div></div> {/each}</div>