From 9acc57cc86ffd5e76fd5ec4f7a7c73c312c7d7b0 Mon Sep 17 00:00:00 2001
From: marzban-dev <marzban.dev@gmail.com>
Date: Thu, 30 Jan 2025 01:09:48 +0330
Subject: [PATCH] Add animation to product slider

---
 .../global/product-detail/Slider.vue          | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/frontend/components/global/product-detail/Slider.vue b/frontend/components/global/product-detail/Slider.vue
index 4e16223..5d49bdd 100644
--- a/frontend/components/global/product-detail/Slider.vue
+++ b/frontend/components/global/product-detail/Slider.vue
@@ -37,21 +37,28 @@ const changeSlide = (id: number) => {
 <template>
     <div class="flex flex-col relative gap-6">
         <div class="bg-white brightness-[97%] w-full relative aspect-square overflow-hidden rounded-200">
-            <img
-                class="size-full absolute object-contain"
-                :src="selectedSlideDetail.picture"
-                :alt="String(selectedSlideDetail.id)"
-            />
+            <Transition name="zoom" mode="out-in">
+                <img
+                    :key="selectedSlideDetail"
+                    class="size-full absolute object-contain"
+                    :src="selectedSlideDetail.picture"
+                    :alt="String(selectedSlideDetail.id)"
+                />
+            </Transition>
         </div>
         <div class="flex items-center justify-between gap-6">
             <div
                 @click="changeSlide(slide.id)"
                 v-for="slide in slides"
-                :class="selectedSlide === slide.id ? 'ring-black' : 'ring-transparent'"
-                class="cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
+                :class="selectedSlide === slide.id ? '!ring-black' : 'ring-transparent'"
+                class="active:scale-95 hover:ring-slate-200 transition-all cursor-pointer brightness-[97%] bg-white aspect-square ring-2 ring-offset-4 rounded-200 w-full overflow-hidden relative"
                 :key="slide.id"
             >
-                <img class="absolute object-cover size-full" :src="slide.picture" :alt="String(slide.id)" />
+                <img
+                    class="absolute object-cover size-full"
+                    :src="slide.picture"
+                    :alt="String(slide.id)"
+                />
             </div>
         </div>
     </div>