Add flip animation to /models route

src/routes/models/+layout.svelte

@@ -17,6 +17,7 @@
 	import type { ModelCard } from "$lib/type";
 	import { userStore } from "$lib/stores/use-user";
 	import Add from "$lib/components/community/reactions/Add.svelte";
+	import { flip } from "svelte/animate";
 
 	let data: {
 		models: ModelCard[],
@@ -132,8 +133,14 @@
 		<Input value={form.search} placeholder="Filter by model name" onChange={handleChangeSearch} />
 	</div>
 	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-5 mt-8 lg:mt-10">
-		{#each data.models as card}
-			<Card card={card} />
+		{#each data.models as card (card.id)}
+			<span
+				class="h-[400px] max-w-[400px] md:h-[350px] md:max-w-[350px] w-full"
+				animate:flip={{ duration: 200 }}
+			>
+				<Card {card}/>
+			</span>
+			<!-- <Card card={card} /> -->
 		{/each}
 		{#if data.models.length === 0}
 			<p class="text-neutral-400 text-left w-full">No models found</p>