perf(animation): finished welcome page animations

ZenkieBear · Dec 29, 2023 · c57014c · c57014c
1 parent 92788d4
commit c57014c
Showing 1 changed file with 58 additions and 56 deletions.
diff --git a/src/components/GgSubMenu.vue b/src/components/GgSubMenu.vue
@@ -1,48 +1,53 @@
 <template>
-  <span ref="main"
-      class="gl-sub-menu"
-      tabindex="4"
-      @click="toggleLangMenu()"
+  <span
+    ref="main"
+    class="gl-sub-menu"
+    tabindex="4"
+    @click="toggleLangMenu()"
   >
-      <slot name="content"></slot>
-      <ul id="items" style="transform-origin: top;">
-        <slot name="items" />
-      </ul>
+    <slot name="content"></slot>
+    <ul id="items" style="transform-origin: top" :style="{
+      scaleY: 0,
+      opacity: 0,
+    }">
+      <slot name="items" />
+    </ul>
   </span>
 </template>
 
 <script lang="ts" setup>
-import gsap from 'gsap';
-import { onMounted, reactive, ref } from 'vue';
+import { debug } from "console";
+import gsap from "gsap";
+import { reactive, ref } from "vue";
 
 const main = ref();
 const visible = reactive({
-  value: true
+  value: false,
 });
-let ctx;
 
-const renderMenu = (visible: boolean, ul) => {
-    if (visible) {
-        gsap.set(ul, {
-            scaleY: 1,
-            opacity: 1
-        })
-    } else {
-        gsap.to(ul, {
-            scaleY: 0,
-            opacity: 0,
-            duration: .3,
-            ease: 'power4.out'
-        })
-    }
-}
+const renderMenu = (visible: boolean, ul: HTMLUListElement) => {
+  if (visible) {
+    gsap.set(ul, {
+      scaleY: 1,
+      opacity: 1,
+    });
+  } else {
+    gsap.to(ul, {
+      scaleY: 0,
+      opacity: 0,
+      duration: 0.3,
+      ease: "power4.out",
+    });
+  }
+};
 const toggleLangMenu = () => {
-    gsap.context(self => {
-        const ul = self.selector?.('ul')
-        renderMenu(visible.value, ul)
-    }, main.value)
-    visible.value = !visible.value;
-}
+  visible.value = !visible.value;
+  gsap.context((self) => {
+    // todo here, it might need to be a ref
+    const ul = self.selector?.("ul");
+    renderMenu(visible.value, ul);
+  }, main.value);
+};
 </script>
 
 <style lang="less">
@@ -54,30 +59,27 @@ const toggleLangMenu = () => {
   display: inline-blocks;
   cursor: pointer;
 
-  &>ul {
-      display: block;
-      position: absolute;
-      top: calc(100%);
-      right: 0;
-      min-width: 100px;
-      padding: 10px;
-      border: 1px solid white;
-      border-radius: 10px;
-      background: rgba(255, 255, 255, .8);
-      color: @primary-color;
+  & > ul {
+    display: block;
+    position: absolute;
+    top: calc(100%);
+    right: 0;
+    min-width: 100px;
+    padding: 10px;
+    border: 1px solid white;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.8);
+    color: @primary-color;
 
-      &>li {
-          padding: 5px;
-          border-radius: 5px;
-          cursor: pointer;
-          &:hover {
-              color: @font-color;
-              background: white;
-          }
+    & > li {
+      padding: 5px;
+      border-radius: 5px;
+      cursor: pointer;
+      &:hover {
+        color: @font-color;
+        background: white;
       }
-  }
-  &:hover ul {
-      // display: block;
+    }
   }
 }
-</style>
+</style>