diff --git a/build/js/PushMenu.js b/build/js/PushMenu.js
index beb1228d2..987695355 100644
--- a/build/js/PushMenu.js
+++ b/build/js/PushMenu.js
@@ -38,6 +38,7 @@ const Selector = {
 const ClassName = {
   COLLAPSED: 'sidebar-collapse',
   OPEN: 'sidebar-open',
+  IS_OPENING: 'sidebar-is-opening',
   CLOSED: 'sidebar-closed'
 }
 
@@ -67,7 +68,7 @@ class PushMenu {
       }
     }
 
-    $(Selector.BODY).removeClass(ClassName.COLLAPSED).removeClass(ClassName.CLOSED)
+    $(Selector.BODY).addClass(ClassName.IS_OPENING).removeClass(`${ClassName.COLLAPSED} ${ClassName.CLOSED}`)
 
     if (this._options.enableRemember) {
       localStorage.setItem(`remember${EVENT_KEY}`, ClassName.OPEN)
@@ -83,7 +84,7 @@ class PushMenu {
       }
     }
 
-    $(Selector.BODY).addClass(ClassName.COLLAPSED)
+    $(Selector.BODY).removeClass(ClassName.IS_OPENING).addClass(ClassName.COLLAPSED)
 
     if (this._options.enableRemember) {
       localStorage.setItem(`remember${EVENT_KEY}`, ClassName.COLLAPSED)
diff --git a/build/scss/_main-sidebar.scss b/build/scss/_main-sidebar.scss
index 3d0bcaba2..2988159a4 100644
--- a/build/scss/_main-sidebar.scss
+++ b/build/scss/_main-sidebar.scss
@@ -185,10 +185,15 @@
 
   .nav-link p {
     display: inline-block;
+    margin: 0;
+  }
+}
+
+.sidebar-is-opening .nav-sidebar {
+  .nav-link p {
     animation-name: fadeIn;
     animation-duration: $transition-speed;
     animation-fill-mode: both;
-    margin: 0;
   }
 }