From a1cc52e15896120eeab288e32be62bc15bb9e402 Mon Sep 17 00:00:00 2001
From: Kateryna Sliepchenko <catherine.slepchenko@gmail.com>
Date: Tue, 26 Sep 2023 17:07:25 +0200
Subject: [PATCH] fix to animation;

---
 src/ui/MobileSettings/MobileSettings.jsx      |  2 +-
 .../MobileSettings/MobileSettings.module.css  | 34 ++++++++++---------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/ui/MobileSettings/MobileSettings.jsx b/src/ui/MobileSettings/MobileSettings.jsx
index b631cfd6..9572dd16 100644
--- 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
index 88e579fd..24591f91 100644
--- 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,7 +60,7 @@
     right: 0;
     padding: 10px;
     z-index: 20000;
-    animation: onHide 1s ease-in-out;
+    animation: onHide .6s ease-in-out;
     animation-fill-mode: forwards;
 }
 
@@ -71,19 +68,21 @@
     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;