perf(tabs): replaces left/width animation with transform

Author: robertmesserle

src/components/tabs/_tabs.scss

@@ -97,14 +97,23 @@ md-tabs-ink-bar {
   height: 2px;
   margin-top: -2px;
   transform: scaleX(1);
-  transition: left 0.5s $swift-ease-in-out-timing-function,
-              width 0.5s $swift-ease-in-out-timing-function,
-              transform 0.25s $swift-ease-out-timing-function;
+  transition: transform 0.5s $swift-ease-in-out-timing-function;
+  transform-origin: 0 0;
+  md-tabs-ink-bar-inner {
+    transition: transform 0.25s $swift-ease-out-timing-function;
+    transform: scaleX(1);
+    transform-origin: 50% 50%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
   &.md-ink-bar-grow {
-    transition: left 0.5s $swift-ease-in-out-timing-function,
-                width 0.5s $swift-ease-in-out-timing-function,
-                transform 0.25s $swift-ease-in-timing-function;
-    transform: scaleX(1.35);
+    md-tabs-ink-bar-inner {
+      transition: transform 0.25s $swift-ease-in-timing-function;
+      transform: scaleX(1.35);
+    }
   }
 }
 

src/components/tabs/js/inkBarDirective.js

@@ -14,6 +14,7 @@ function MdTabInkDirective($mdConstant, $window, $$rAF, $timeout) {
   return {
     restrict: 'E',
     require: ['^?mdNoBar', '^mdTabs'],
+    template: '<md-tabs-ink-bar-inner></md-tabs-ink-bar-inner>',
     link: postLink
   };
 
@@ -38,15 +39,14 @@ function MdTabInkDirective($mdConstant, $window, $$rAF, $timeout) {
         var count = tabsCtrl.count();
         var scale = 1 / count;
         var left = tabsCtrl.indexOf(selected);
+        element.css($mdConstant.CSS.TRANSFORM, 'scaleX(' + scale + ') ' +
+                    'translate3d(' + left * 100 + '%,0,0)');
         element.addClass('md-ink-bar-grow');
-        element.css({
-          width: Math.round(scale * 100) + '%',
-          left:  (left / scale) + '%'
-        });
         if (timeout) $timeout.cancel(timeout);
         timeout = $timeout(function () {
           element.removeClass('md-ink-bar-grow');
         }, 250, false);
+
       }
     }
 

src/components/tabs/tabs-theme.scss

@@ -12,7 +12,9 @@ md-tabs.md-#{$theme-name}-theme {
   }
 
   md-tabs-ink-bar {
-    background: $tabs-highlight-color;
+    md-tabs-ink-bar-inner {
+      background: $tabs-highlight-color;
+    }
   }
 
   md-tab {