update cocktails list

MixDrinks · Oct 12, 2024 · 52d908d · 52d908d
1 parent 7b127a4
commit 52d908d
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 99 deletions.
diff --git a/components/global/CocktailsList.vue b/components/global/CocktailsList.vue
@@ -1,23 +1,14 @@
 <template>
     <div class="wrapper">
         <div :class="listClasses" class="list">
-            <div
+            <CocktailsCart
                 v-for="(cocktail, cocktailIndex) in cocktailsFirst"
-                :key="`item-${cocktail.id}${cocktailIndex}`"
-                :class="itemClasses"
-                class="list__item item"
-            >
-                <Transition
-                    :style="getTransitionDelay(cocktailIndex, true)"
-                    appear
-                    name="list"
-                    mode="in-out"
-                >
-                    <div v-show="isMounted" class="item__animation">
-                        <CocktailsCart :cocktail="cocktail" />
-                    </div>
-                </Transition>
-            </div>
+                :key="`list__cart-${cocktail.id}${cocktailIndex}`"
+                :style="getAnimationDelay(cocktailIndex, true)"
+                :cocktail="cocktail"
+                :class="cartClasses"
+                class="list__cart"
+            />
         </div>
         <div v-if="ads" class="list__ads">
             <ins
@@ -30,23 +21,15 @@
             />
         </div>
         <div v-if="cocktailsSecond.length" :class="listClasses" class="list">
-            <div
-                v-for="(cocktail, cocktailIndex) in cocktailsSecond"
-                :key="`item-${cocktail.id}${cocktailIndex}`"
-                :class="itemClasses"
-                class="list__item item"
-            >
-                <Transition
-                    :style="getTransitionDelay(cocktailIndex)"
-                    appear
-                    name="list"
-                    mode="in-out"
-                >
-                    <div v-show="isMounted" class="item__animation">
-                        <CocktailsCart :cocktail="cocktail" isLoadingLazy />
-                    </div>
-                </Transition>
-            </div>
+            <CocktailsCart
+                v-for="(cocktail, cocktailIndex) in cocktailsFirst"
+                :key="`list__cart-${cocktail.id}${cocktailIndex}`"
+                :style="getAnimationDelay(cocktailIndex)"
+                :cocktail="cocktail"
+                :class="cartClasses"
+                isLoadingLazy
+                class="list__cart"
+            />
         </div>
     </div>
 </template>
@@ -102,8 +85,8 @@ export default defineComponent({
         const listClasses = computed(() => ({
             [`list--${unref(modificator)}`]: Boolean(unref(modificator))
         }))
-        const itemClasses = computed(() => ({
-            [`item--${unref(modificator)}`]: Boolean(unref(modificator))
+        const cartClasses = computed(() => ({
+            [`list__cart--${unref(modificator)}`]: Boolean(unref(modificator))
         }))
 
         const isMounted = ref(false)
@@ -143,18 +126,18 @@ export default defineComponent({
             unref(checkLength) ? unref(cocktails).slice(12) : []
         )
 
-        const getTransitionDelay = (index, isFirst) => {
+        const getAnimationDelay = (index, isFirst) => {
             const divisor = 20
             if (unref(isMounted)) {
                 if (isFirst) {
-                    return { transitionDelay: `${index / divisor}s` }
+                    return { animationDelay: `${index / divisor}s` }
                 }
 
                 if (index / 12 < 1) {
-                    return { transitionDelay: `${(index + 12) / divisor}s` }
+                    return { animationDelay: `${(index + 12) / divisor}s` }
                 }
 
-                return { transitionDelay: `${((index + 12) % 24) / divisor}s` }
+                return { animationDelay: `${((index + 12) % 24) / divisor}s` }
             }
 
             return false
@@ -163,10 +146,9 @@ export default defineComponent({
         return {
             cocktailsFirst,
             cocktailsSecond,
-            itemClasses,
+            cartClasses,
             listClasses,
-            isMounted,
-            getTransitionDelay
+            getAnimationDelay
         }
     }
 })

diff --git a/components/global/styles/cocktails-list.scss b/components/global/styles/cocktails-list.scss
@@ -47,86 +47,86 @@
         }
     }
 
-    &__item {
-        @media (max-width: 1024px) {
-            &:not(:last-child) {
-                margin-bottom: 8px;
-            }
-        }
-    }
-}
-
-.item {
-    position: relative;
-
-    &__animation {
+    &__cart {
+        opacity: 0;
         height: 100%;
-    }
+        animation: showCard 0.3s forwards;
 
-    &--items {
-        position: relative;
-
-        &::after {
-            @media (min-width: 1023px) {
-                content: '';
-                position: absolute;
-                width: 1px;
-                background-color: rgba(154, 209, 116, 0.5);
-                right: -10px;
-                top: 8vw;
-                height: 20vw;
+        @keyframes showCard {
+            0% {
+                opacity: 0;
+                filter: blur(1rem);
+                transform: translateY(10px);
             }
-
-            @media (min-width: 1199px) {
-                top: 6vw;
-                height: 15vw;
+            100% {
+                opacity: 1;
+                filter: blur(0);
+                transform: translateY(0);
             }
+        }
 
-            @media (min-width: 1599px) {
-                top: 5vw;
-                height: 9vw;
+        @media (max-width: 1024px) {
+            &:not(:last-child) {
+                margin-bottom: 8px;
             }
         }
 
-        &:nth-child(3n) {
+        &--items {
+            position: relative;
+
             &::after {
                 @media (min-width: 1023px) {
-                    display: none;
+                    content: '';
+                    position: absolute;
+                    width: 1px;
+                    background-color: rgba(154, 209, 116, 0.5);
+                    right: -10px;
+                    top: 8vw;
+                    height: 20vw;
                 }
 
                 @media (min-width: 1199px) {
-                    display: block;
+                    top: 6vw;
+                    height: 15vw;
+                }
+
+                @media (min-width: 1599px) {
+                    top: 5vw;
+                    height: 9vw;
                 }
             }
-        }
 
-        &:nth-child(4n) {
-            &::after {
-                @media (min-width: 1199px) {
-                    display: none;
+            &:nth-child(3n) {
+                &::after {
+                    @media (min-width: 1023px) {
+                        display: none;
+                    }
+
+                    @media (min-width: 1199px) {
+                        display: block;
+                    }
                 }
+            }
 
-                @media (min-width: 1599px) {
-                    display: block;
+            &:nth-child(4n) {
+                &::after {
+                    @media (min-width: 1199px) {
+                        display: none;
+                    }
+
+                    @media (min-width: 1599px) {
+                        display: block;
+                    }
                 }
             }
-        }
 
-        &:nth-child(6n) {
-            &::after {
-                @media (min-width: 1599px) {
-                    display: none;
+            &:nth-child(6n) {
+                &::after {
+                    @media (min-width: 1599px) {
+                        display: none;
+                    }
                 }
             }
         }
     }
 }
-.list-enter-active {
-    transition: all 0.3s ease;
-}
-
-.list-enter-from {
-    opacity: 0;
-    filter: blur(1rem);
-    transform: translateY(10px);
-}