fix(tabs): adds fix for css transition on theme change

Closes #1033.
angular · Jan 27, 2015 · 312dcc6 · 312dcc6
1 parent 572da37
commit 312dcc6
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/tabs/js/tabItemDirective.js b/src/components/tabs/js/tabItemDirective.js
@@ -91,6 +91,8 @@ function MdTabDirective($mdInkRipple, $compile, $mdUtil, $mdConstant, $timeout)
       var tabItemCtrl = ctrls[0]; // Controller for THIS tabItemCtrl
       var tabsCtrl = ctrls[1]; // Controller for ALL tabs
 
+      $timeout(element.addClass.bind(element, 'md-tab-themed'), 0, false);
+
       scope.$watch(
           function () { return attr.label; },
           function () { $timeout(function () { tabsCtrl.scope.$broadcast('$mdTabsChanged'); }, 0, false); }

diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
@@ -153,8 +153,11 @@ md-tab {
   cursor: pointer;
   padding: 20px 24px;
   box-sizing: border-box;
-  transition: background 0.35s $swift-ease-in-out-timing-function,
-              color 0.35s $swift-ease-in-out-timing-function;
+  transition: none;
+  &.md-tab-themed {
+    transition: background 0.35s $swift-ease-in-out-timing-function,
+                color 0.35s $swift-ease-in-out-timing-function;
+  }
 
   &[disabled] {
     pointer-events: none;