#1933 Cache width/height/isRTL on load to improve animation performance of sidebar

src/definitions/collections/menu.less

@@ -1447,9 +1447,7 @@ Floated Menu / Item
   padding-left: 0px !important;
   padding-right: 0px !important;
   text-align: center;
-}
-.ui.item.menu .item {
-  display: block;
+  justify-content: center;
 }
 .ui.menu.two.item .item {
   width: 50%;

src/definitions/modules/sidebar.js

@@ -101,6 +101,8 @@ $.fn.sidebar = function(parameters) {
             module.setup.layout();
           }
 
+          module.setup.cache();
+
           module.instantiate();
         },
 
@@ -208,8 +210,9 @@ $.fn.sidebar = function(parameters) {
         add: {
           bodyCSS: function() {
             var
-              width     = $module.outerWidth(),
-              height    = $module.outerHeight(),
+              width     = module.cache.width  || $module.outerWidth(),
+              height    = module.cache.height || $module.outerHeight(),
+              isRTL     = module.is.rtl(),
               direction = module.get.direction(),
               distance  = {
                 left   : width,
@@ -219,7 +222,8 @@ $.fn.sidebar = function(parameters) {
               },
               style
             ;
-            if( module.is.rtl() ){
+
+            if(isRTL){
               module.verbose('RTL detected, flipping widths');
               distance.left = -width;
               distance.right = width;
@@ -289,6 +293,7 @@ $.fn.sidebar = function(parameters) {
           $sidebars = $context.children(selector.sidebar);
           $pusher   = $context.children(selector.pusher);
           $fixed    = $context.children(selector.fixed);
+          module.clear.cache();
         },
 
         refreshSidebars: function() {
@@ -298,13 +303,20 @@ $.fn.sidebar = function(parameters) {
 
         repaint: function() {
           module.verbose('Forcing repaint event');
-          element.style.display='none';
+          element.style.display = 'none';
           element.offsetHeight;
           element.scrollTop = element.scrollTop;
-          element.style.display='';
+          element.style.display = '';
         },
 
         setup: {
+          cache: function() {
+            module.cache = {
+              width  : $module.outerWidth(),
+              height : $module.outerHeight(),
+              rtl    : ($module.css('direction') == 'rtl')
+            };
+          },
           layout: function() {
             if( $context.children(selector.pusher).length === 0 ) {
               module.debug('Adding wrapper element for sidebar');
@@ -324,6 +336,7 @@ $.fn.sidebar = function(parameters) {
               $module.detach().prependTo($context);
               module.refresh();
             }
+            module.clear.cache();
             module.set.pushable();
             module.set.direction();
           }
@@ -513,11 +526,11 @@ $.fn.sidebar = function(parameters) {
           ;
           module.verbose('Removing context push state', module.get.direction());
 
-          module.set.transition(transition);
           module.unbind.clickaway();
           module.unbind.scrollLock();
 
           animate = function() {
+            module.set.transition(transition);
             module.set.animating();
             module.remove.visible();
             if(settings.dimPage && !module.othersVisible()) {
@@ -609,12 +622,23 @@ $.fn.sidebar = function(parameters) {
           window.scrollTo(0, currentScroll);
         },
 
+        clear: {
+          cache: function() {
+            module.verbose('Clearing cached dimensions');
+            module.cache = {};
+          }
+        },
+
         set: {
           // html
           ios: function() {
             $html.addClass(className.ios);
           },
 
+          dimmed: function() {
+            $pusher.addClass(className.dimmed);
+          },
+
           // container
           pushed: function() {
             $context.addClass(className.pushed);
@@ -814,7 +838,10 @@ $.fn.sidebar = function(parameters) {
             return $context.hasClass(className.animating);
           },
           rtl: function () {
-            return $module.css('direction') == 'rtl';
+            if(module.cache.rtl === undefined) {
+              module.cache.rtl = ($module.css('direction') == 'rtl');
+            }
+            return module.cache.rtl;
           }
         },
 

src/definitions/modules/sidebar.less

@@ -154,8 +154,6 @@ body.pushable > .pusher {
   right: 0px;
   content: '';
   background-color: @dimmerColor;
-  width: 0px;
-  height: 0px;
   overflow: hidden;
   opacity: 0;
   transition: @dimmerTransition;

src/themes/default/modules/sidebar.variables

@@ -13,10 +13,7 @@
 
 /* Dimmer */
 @dimmerColor: rgba(0, 0, 0, 0.4);
-@dimmerTransition:
-  transform @duration,
-  opacity @duration
-;
+@dimmerTransition: opacity @duration;
 
 /* Color below page */
 @canvasBackground: @lightBlack;