feat(site): add crossfade transitions to draggable items in nested and sortable examples

Author: hanielu

sites/docs/src/lib/components/examples/nested/draggable-containers.svelte

@@ -13,6 +13,7 @@
 	import {SortableContext, arrayMove} from '@dnd-kit-svelte/sortable';
 	import TasksContainer, {type IData, type INestedItem} from './tasks-container.svelte';
 	import TaskItem from './task-item.svelte';
+	import {crossfade} from 'svelte/transition';
 
 	const defaultItems: INestedItem[] = [
 		{
@@ -122,6 +123,8 @@
 		activeContainer.nesteds = activeContainer.nesteds.filter((nested) => nested.id !== active.id);
 		overContainer.nesteds.push(item);
 	}
+
+	const [send, recieve] = crossfade({duration: 250});
 </script>
 
 <DndContext {sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd} onDragOver={handleDragOver}>
@@ -152,7 +155,9 @@
 	<TasksContainer {data} type="container" accepts={['item']} class={className}>
 		<SortableContext items={nesteds.map((item) => item.id)}>
 			{#each nesteds as nested (nested.id)}
-				<TaskItem data={nested} type="item" />
+				<div class="" in:recieve={{key: nested.id}} out:send={{key: nested.id}}>
+					<TaskItem data={nested} type="item" />
+				</div>
 			{:else}
 				<p class="text-(sm center #9E9E9E) fw-medium pt">No tasks</p>
 			{/each}

sites/docs/src/lib/components/examples/nested/tasks-container.svelte

@@ -42,7 +42,7 @@
 
 <div class="relative" bind:this={node.current} {style}>
 	<!-- Original element - becomes invisible during drag but maintains dimensions -->
-	<div class={['p-5 pt-6 bg-#F9F9F9 rd-3xl overflow-hidden', className, {invisible: isDragging.current}]}>
+	<div class={['p-5 pt-6 bg-#F9F9F9 rd-3xl', className, {invisible: isDragging.current}]}>
 		<div class="flex-s-between text-#9E9E9E">
 			<div class="pl-5.5">
 				<p class="text-(lg dark) fw-bold relative flex-s-start">

sites/docs/src/lib/components/examples/sortable/sortable-list.svelte

@@ -10,6 +10,7 @@
 	} from '@dnd-kit-svelte/core';
 	import {SortableContext, arrayMove} from '@dnd-kit-svelte/sortable';
 	import {dropAnimation, sensors} from '$lib';
+	import {crossfade} from 'svelte/transition';
 
 	interface Todo {
 		id: string;
@@ -72,6 +73,8 @@
 		// Update the active task's done status to match the container it's being dragged over
 		activeTask.done = overTask.done;
 	}
+
+	const [send, recieve] = crossfade({duration: 100});
 </script>
 
 <DndContext {sensors} onDragStart={handleDragStart} onDragEnd={handleDragEnd} onDragOver={handleDragOver}>
@@ -94,7 +97,9 @@
 
 			<div class="grid gap-2">
 				{#each tasks as task (task.id)}
-					<SortableItem {task} />
+					<div class="" in:recieve={{key: task.id}} out:send={{key: task.id}}>
+						<SortableItem {task} />
+					</div>
 				{/each}
 			</div>
 		</Droppable>