Add animation to product slider

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>