fix to animation;

epam · Sep 26, 2023 · a1cc52e · a1cc52e
1 parent 619a62b
commit a1cc52e
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/src/ui/MobileSettings/MobileSettings.jsx b/src/ui/MobileSettings/MobileSettings.jsx
@@ -100,7 +100,7 @@ export const MobileSettings = () => {
         </div>
       )}
       {(is2DMenuOpen || !isSmallScreen) && (
-        <div className={css.settings__menu_block}>
+        <div className={`${css.settings__menu_block} ${css.animation}`}>
           <LeftToolbar />
         </div>
       )}

diff --git a/src/ui/MobileSettings/MobileSettings.module.css b/src/ui/MobileSettings/MobileSettings.module.css
@@ -14,7 +14,7 @@
     opacity: 1;
     border: 1px solid var(--dark-gray);
     border-radius: 0.5rem;
-    animation: onHide 1s ease-in-out;
+    animation: onHide .6s ease-in-out;
     animation-fill-mode: forwards;
 
 }
@@ -36,11 +36,8 @@
 
 .hidden {
     display: none;
-    width: 0;
     opacity: 0;
-    overflow: hidden;
-    visibility: hidden;
-    animation: onHide 1s ease-in-out;
+    animation: onHide .6s ease-in-out;
     animation-fill-mode: forwards;
 }
 
@@ -63,27 +60,29 @@
     right: 0;
     padding: 10px;
     z-index: 20000;
-    animation: onHide 1s ease-in-out;
+    animation: onHide .6s ease-in-out;
     animation-fill-mode: forwards;
 }
 
 .flex {
     flex-direction: column;
 }
 
-@keyframes onHide {
-    0% {
-        opacity: 0;
-    }
-    50% {
-        opacity: 0.9;
-    }
-    100% {
-        opacity: 1;
+@media screen and (max-width: 1024px){
+
+    @keyframes onHide {
+        0% {
+            opacity: 0;
+        }
+        50% {
+            opacity: 0.9;
+        }
+        100% {
+            opacity: 1;
+        }
     }
 }
 
-
 @media screen and (min-width: 768px){
 
     .buttons__container {
@@ -119,6 +118,9 @@
         left: 12%;
         z-index: 10;
     }
+    .animation {
+        animation: none;
+    }
 
     .horizontal {
         width: 10rem;