enhance(tabs): refactored ink-bar animation to user a smoother method

Author: robertmesserle

src/components/tabs/_tabs.scss

@@ -99,21 +99,8 @@ md-tabs-ink-bar {
   transform: scaleX(1);
   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 {
-    md-tabs-ink-bar-inner {
-      transition: transform 0.25s $swift-ease-in-timing-function;
-      transform: scaleX(1.35);
-    }
+  &.md-ink-bar-delayed {
+    transition: transform 0.5s cubic-bezier(0.45, 0, 0.15, 1);
   }
 }
 

src/components/tabs/js/inkBarDirective.js

@@ -14,7 +14,6 @@ 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
   };
 

src/components/tabs/js/tabsDirective.js

@@ -100,6 +100,7 @@ function TabsDirective($parse, $mdTheming) {
           // flex container for <md-tab> elements
           '<div class="md-header-items">' +
             '<md-tabs-ink-bar></md-tabs-ink-bar>' +
+            '<md-tabs-ink-bar class="md-ink-bar-delayed"></md-tabs-ink-bar>' +
           '</div>' +
         '</div>' +
 

src/components/tabs/tabs-theme.scss

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