replace transition to opacity for sidebar

build/js/Layout.js

@@ -173,7 +173,10 @@ const Layout = (($) => {
         this.fixLayoutHeight()
       })
 
-      $('body.hold-transition').removeClass('hold-transition')
+      setTimeout(() => {
+        $('body.hold-transition').removeClass('hold-transition')
+
+      }, 50);
     }
 
     _max(numbers) {

build/scss/_layout.scss

@@ -627,5 +627,6 @@ body:not(.sidebar-mini-md) {
   .control-sidebar *,
   .main-footer {
     transition: none !important;
+    animation-duration: 0s !important;
   }
 }

build/scss/_main-sidebar.scss

@@ -183,6 +183,9 @@
 
   .nav-link p {
     display: inline-block;
+    animation-name: fadeIn;
+    animation-duration: $transition-speed;
+    animation-fill-mode: both;
     margin: 0;
   }
 }
@@ -818,13 +821,17 @@
 .nav-collapse-hide-child {
   .menu-open > .nav-treeview {
     max-height: min-content;
-    opacity: 1;
+    animation-name: fadeIn;
+    animation-duration: $transition-speed;
+    animation-fill-mode: both;
   }
 
   .sidebar-collapse & {
     .menu-open > .nav-treeview {
       max-height: 0;
-      opacity: 0;
+      animation-name: fadeOut;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
     }
   }
 
@@ -834,7 +841,9 @@
   .sidebar-mini-md.sidebar-collapse .main-sidebar:hover & {
     .menu-open > .nav-treeview {
       max-height: min-content;
-      opacity: 1;
+      animation-name: fadeIn;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
     }
   }
 }

build/scss/_sidebar-mini.scss

@@ -61,6 +61,26 @@
   }
 }
 
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 .sidebar-collapse {
   .main-sidebar.sidebar-focused,
   .main-sidebar:hover {
@@ -86,12 +106,16 @@
     }
 
     .logo-xs {
-      opacity: 1;
+      animation-name: fadeIn;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
       visibility: visible;
     }
 
     .logo-xl {
-      opacity: 0;
+      animation-name: fadeOut;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
       visibility: hidden;
     }
 
@@ -103,7 +127,9 @@
     .user-panel > .info,
     .nav-sidebar .nav-link p {
       margin-left: -10px;
-      opacity: 0;
+      animation-name: fadeOut;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
       visibility: hidden;
       width: 0;
     }

build/scss/mixins/_sidebar.scss

@@ -54,18 +54,24 @@
     .nav-sidebar .nav-link p,
     .brand-text {
       margin-left: -10px;
-      opacity: 0;
+      animation-name: fadeOut;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
       visibility: hidden;
     }
 
     .logo-xl {
-      opacity: 0;
+      animation-name: fadeOut;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
       visibility: hidden;
     }
 
     .logo-xs {
       display: inline-block;
-      opacity: 1;
+      animation-name: fadeIn;
+      animation-duration: $transition-speed;
+      animation-fill-mode: both;
       visibility: visible;
     }
 
@@ -108,12 +114,16 @@
         .logo-xl {
           display: inline-block;
           margin-left: 0;
-          opacity: 1;
+          animation-name: fadeIn;
+          animation-duration: $transition-speed;
+          animation-fill-mode: both;
           visibility: visible;
         }
 
         .logo-xs {
-          opacity: 0;
+          animation-name: fadeOut;
+          animation-duration: $transition-speed;
+          animation-fill-mode: both;
           visibility: hidden;
         }