diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css
index 0e9d54dbe9..a2258128ca 100644
--- a/platform/commonUI/general/res/css/theme-espresso.css
+++ b/platform/commonUI/general/res/css/theme-espresso.css
@@ -734,23 +734,31 @@ mct-container {
 @media screen and (max-width: 800px) {
   /* line 26, ../sass/mobile/_layout.scss */
   .holder-hide {
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
     left: -150px; } }
 
 @media screen and (max-width: 800px) {
-  /* line 32, ../sass/mobile/_layout.scss */
+  /* line 33, ../sass/mobile/_layout.scss */
   .holder-show {
-    left: -150px; } }
+    -moz-transition-duration: 0.2s;
+    -o-transition-duration: 0.2s;
+    -webkit-transition-duration: 0.2s;
+    transition-duration: 0.2s;
+    left: 0px; } }
 
 @media screen and (max-width: 514px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 40, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 100px; } }
 @media screen and (min-width: 515px) and (max-width: 800px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 40, ../sass/mobile/_layout.scss */
   .browse-manage {
     width: 150px; } }
 @media screen and (min-width: 801px) {
-  /* line 38, ../sass/mobile/_layout.scss */
+  /* line 40, ../sass/mobile/_layout.scss */
   .browse-manage {
     min-width: 150px;
     max-width: 800px;
diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss
index d8ab1b3d02..797018c7e0 100644
--- a/platform/commonUI/general/res/sass/mobile/_layout.scss
+++ b/platform/commonUI/general/res/sass/mobile/_layout.scss
@@ -25,12 +25,14 @@
 
 .holder-hide {
     @include phoneandtablet {
+        @include transition-duration(.2s);
         left: -150px;
     }
 }
 
 .holder-show {
     @include phoneandtablet {
+        @include transition-duration(.2s);
         left: 0px;
     } 
 }
diff --git a/platform/commonUI/general/src/controllers/TreeMenuController.js b/platform/commonUI/general/src/controllers/TreeMenuController.js
index 5d951bb4ad..13ec491657 100644
--- a/platform/commonUI/general/src/controllers/TreeMenuController.js
+++ b/platform/commonUI/general/src/controllers/TreeMenuController.js
@@ -34,7 +34,11 @@ define(
                         document.getElementById("myElement").className =
                             document.getElementById("myElement")
                             .className.replace(/(?:^|\s)holder-hide(?!\S)/g, '');
+                        document.getElementById("myElement").className += " holder-show";
                     } else {
+                        document.getElementById("myElement").className =
+                            document.getElementById("myElement")
+                            .className.replace(/(?:^|\s)holder-show(?!\S)/g, '');
                         document.getElementById("myElement").className += " holder-hide";
                     }