A: show card animation

N1c0Dev · Dec 5, 2024 · 230c83f · 230c83f
1 parent b443617
commit 230c83f
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/assets/main.css b/src/assets/main.css
@@ -5,3 +5,21 @@ body {
     font-family: DM Sans, Avenir, Helvetica, Arial, sans-serif;
 }
 
+.show-card {
+    opacity: 0;
+    transform: translateY(50px);
+    animation: show-animation 1s ease-out forwards;
+}
+
+@keyframes show-animation {
+    0% {
+        opacity: 0;
+        transform: translateY(50px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+
diff --git a/src/views/pages/home/HomeView.vue b/src/views/pages/home/HomeView.vue
@@ -52,16 +52,17 @@
     for(let index = 0; index < 7; index++) {
       const groupArray = document.getElementsByName(`group-${index}`)
 
-      groupArray.forEach((item) => {
-        index > 0 ? item.classList.add('hidden') : item.classList.remove('hidden')
-      })
+      groupArray.forEach(
+        (item) => index > 0 ? item.classList.add('hidden') : item.classList.remove('hidden')
+      )
     }
   }
   function revealSection(index: number) {
     const groupArray = document.getElementsByName(`group-${index}`)
 
     groupArray.forEach((item) => {
       item.classList.remove('hidden')
+      item.classList.add('show-card')
     })
   }