Slide animation on the meta-menu

os2ulf · Jun 5, 2024 · a338f28 · a338f28
1 parent f2d4ed5
commit a338f28
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/assets/css/_transitions.css b/assets/css/_transitions.css
@@ -166,3 +166,22 @@
     transform: translateX(0);
   }
 }
+
+/* slide from top */
+.slide-top-enter-active {
+  animation: slide-top 0.3s;
+}
+
+.slide-top-leave-active {
+  animation: slide-top 0.3s reverse;
+}
+
+@keyframes slide-top {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
diff --git a/components/globals/navigation/TheMetaMenu.vue b/components/globals/navigation/TheMetaMenu.vue
@@ -88,11 +88,13 @@ const closeOffCanvas = () => {
                 />
 
                 <ClientOnly>
-                  <TheOffCanvasMetaMenu
-                    v-if="isOpen && activeNavItem === metaItem"
-                    :nested-items="metaItem?.below"
-                    class="meta-offcanvas"
-                  />
+                  <Transition name="slide-top">
+                    <TheOffCanvasMetaMenu
+                      v-if="isOpen && activeNavItem === metaItem"
+                      :nested-items="metaItem?.below"
+                      class="meta-offcanvas"
+                    />
+                  </Transition>
                 </ClientOnly>
               </div>
             </NuxtLink>