add flip animation

thisuxhq · Nov 10, 2024 · 6321bd0 · 6321bd0
1 parent 499470b
commit 6321bd0
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/routes/grid-sort/+page.svelte b/src/routes/grid-sort/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { draggable, droppable, type DragDropState } from '$lib/index.js';
+	import { flip } from 'svelte/animate';
 
 	interface Card {
 		id: string;
@@ -39,6 +40,7 @@
 					use:droppable={{ container: index.toString(), callbacks: { onDrop: handleDrop } }}
 					class="relative aspect-square rounded-xl bg-white/50 p-1 backdrop-blur-sm
                            transition-all duration-300 hover:bg-white/60 dark:bg-slate-800/50"
+					animate:flip={{ duration: 300 }}
 				>
 					<div
 						use:draggable={{

diff --git a/src/routes/simple-list/+page.svelte b/src/routes/simple-list/+page.svelte
@@ -31,7 +31,8 @@
 		}
 	]);
 
-	function handleDrop({ draggedItem, targetContainer }: DragDropState<Item>) {
+	function handleDrop(state: DragDropState<unknown>) {
+		const { draggedItem, targetContainer } = state as DragDropState<Item>;
 		const dragIndex = items.findIndex((item: Item) => item.id === draggedItem.id);
 		const dropIndex = parseInt(targetContainer ?? '0');