Add transition to drawer-item

resources/css/main.scss

@@ -98,7 +98,7 @@ a {
   align-items: center;
   transition: width 500ms;
 
-  .dropdown-nav-item {
+  .drawer-item {
     position: relative;
     opacity: 0;
     margin-top: math.div(variables.$px_horizontalPadding, 4);
@@ -109,6 +109,7 @@ a {
     color: transparent;
     font: 600 28px "Montserrat", sans-serif;
     text-decoration: none;
+    transition: opacity 250ms ease-in-out;
 
     &:first-of-type {
       margin-top: math.div(variables.$px_horizontalPadding, 2);
@@ -147,116 +148,6 @@ a {
   }
 }
 
-.dropdown_close_animation {
-  -webkit-animation: drawer-close 550ms;
-  animation: drawer-close 550ms;
-}
-
-.dropdown-nav-item_close_animation {
-  -webkit-animation: navbar-disappear 550ms;
-  animation: navbar-disappear 550ms;
-}
-
-@-webkit-keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes drawer-close {
-  from {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-
-  to {
-    visibility: hidden;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-@-webkit-keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes drawer-open {
-  from {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-    visibility: visible;
-  }
-
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@-webkit-keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes navbar-appear {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@-webkit-keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-@keyframes navbar-disappear {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
 #container {
   min-height: 90vh;
   display: grid;

resources/scripts/main.js

@@ -2,6 +2,7 @@ const SCROLL_MIN = 100;
 scroll_to_top = document.getElementById("scroll-to-top");
 el_drawer = document.getElementById("drawer");
 el_container = document.getElementById("container");
+$drawer_item = document.querySelectorAll(".drawer-item");
 
 function checkScroll() {
     if (document.documentElement.scrollTop > SCROLL_MIN || document.body.scrollTop > SCROLL_MIN) {
@@ -20,20 +21,18 @@ async function sleep(milliseconds) {
     return new Promise(resolve => setTimeout(resolve, milliseconds));
 }
 
-let navitems = document.getElementsByClassName('dropdown-nav-item');
-
 async function toggleDropdown() {
     let expanded = el_drawer.classList.contains("expanded");
     if (expanded) {
-        for (let i = 0; i < navitems.length; i++) {
+        for (let i = 0; i < $drawer_item.length; i++) {
-            navitems[i].classList.toggle("visible");
+            $drawer_item[i].classList.toggle("visible");
         }
         el_drawer.classList.toggle("expanded");
     } else {
         el_drawer.classList.toggle("expanded");
-        await sleep(500);
+        await sleep(250);
-        for (let i = 0; i < navitems.length; i++) {
+        for (let i = 0; i < $drawer_item.length; i++) {
-            navitems[i].classList.toggle("visible");
+            $drawer_item[i].classList.toggle("visible");
         }
     }
 }