add transition delay on mobile bottom menu

goldipl · Jul 13, 2024 · 2495b8b · 2495b8b
1 parent efa4772
commit 2495b8b
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 1 deletion.
diff --git a/js/header-scripts.js b/js/header-scripts.js
@@ -198,6 +198,7 @@ $(document).ready(() => {
     e.preventDefault();
     $(this).toggleClass('open');
     $('.header-2-0 .mobile-menu').addClass('active');
+    $('.header-2-0 .mobile-menu').addClass('transition-delay');
     $('body').addClass('body-locked');
     $('html').addClass('body-locked');
     $('.mobile-menu-img-wrapper').removeClass('active');
@@ -214,6 +215,7 @@ $(document).ready(() => {
     e.preventDefault();
     $(this).toggleClass('open');
     $('.header-2-0 .mobile-menu').addClass('active');
+    $('.header-2-0 .mobile-menu').addClass('transition-delay');
     $('body').addClass('body-locked');
     $('html').addClass('body-locked');
     $('.mobile-menu-img-wrapper').removeClass('active');

diff --git a/sass/common/_mobile_menu.scss b/sass/common/_mobile_menu.scss
@@ -57,6 +57,9 @@ body.body-locked {
     &.active {
       transform: translateX(0);
     }
+    &.transition-delay {
+      transition: all 0.2s ease 0.2s;
+    }
     &-wrapper {
       display: flex;
       flex-direction: column;

diff --git a/sass/main.css b/sass/main.css
@@ -2769,6 +2769,9 @@ body.body-locked::after {
 .header-2-0 .mobile-menu.active {
   transform: translateX(0);
 }
+.header-2-0 .mobile-menu.transition-delay {
+  transition: all 0.2s ease 0.2s;
+}
 .header-2-0 .mobile-menu-wrapper {
   display: flex;
   flex-direction: column;

diff --git a/sass/main.css.map b/sass/main.css.map