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>