feat(tabs): adds default transitions for tab content

By default, now tab content will animate in from whichever direction the
ink-bar is moving.  These animations can be overridden through the
following classes:

When a tab is selected, the following classes are added in order:
1. `md-transition-rtl`: flags the animation as right-to-left
2. `ng-animate`: added at the start of all animations
3. `ng-hide-remove`
4. `ng-hide-remove-active`

When a tab is deselected, the following classes are added in order:
1. `md-transition-rtl`: flags the animation as right-to-left
2. `ng-animate`: added at the start of all animations
3. `ng-hide-add`
4. `ng-hide-add-active`

Closes #717.
Closes #811.

src/components/tabs/js/tabItemController.js

@@ -48,20 +48,22 @@ function TabItemController($scope, $element, $attrs, $compile, $animate, $mdUtil
     });
   }
 
-  function onSelect() {
+  function onSelect(rightToLeft) {
     // Resume watchers and events firing when tab is selected
     $mdUtil.reconnectScope(self.contentScope);
     self.hammertime.on('swipeleft swiperight', $scope.onSwipe);
 
     $element.addClass('active');
     $element.attr('aria-selected', true);
     $element.attr('tabIndex', 0);
+    if (angular.isDefined(rightToLeft))
+      self.contentContainer[ rightToLeft ? 'addClass' : 'removeClass' ]('md-transition-rtl');
     $animate.removeClass(self.contentContainer, 'ng-hide');
 
     $scope.onSelect();
   }
 
-  function onDeselect() {
+  function onDeselect(rightToLeft) {
     // Stop watchers & events from firing while tab is deselected
     $mdUtil.disconnectScope(self.contentScope);
     self.hammertime.off('swipeleft swiperight', $scope.onSwipe);
@@ -70,6 +72,8 @@ function TabItemController($scope, $element, $attrs, $compile, $animate, $mdUtil
     $element.attr('aria-selected', false);
     // Only allow tabbing to the active tab
     $element.attr('tabIndex', -1);
+    if (angular.isDefined(rightToLeft))
+      self.contentContainer[ rightToLeft ? 'addClass' : 'removeClass' ]('md-transition-rtl');
     $animate.addClass(self.contentContainer, 'ng-hide');
 
     $scope.onDeselect();

src/components/tabs/js/tabsController.js

@@ -20,7 +20,7 @@ function MdTabsController($scope, $element, $mdUtil, $$rAF) {
   self.indexOf = tabsList.indexOf;
   self.itemAt = tabsList.itemAt;
   self.count = tabsList.count;
-  
+
   self.getSelectedItem = getSelectedItem;
   self.getSelectedIndex = getSelectedIndex;
   self.add = add;
@@ -57,7 +57,7 @@ function MdTabsController($scope, $element, $mdUtil, $$rAF) {
 
     // Select the new tab if we don't have a selectedIndex, or if the
     // selectedIndex we've been waiting for is this tab
-    if ($scope.selectedIndex === -1 || !angular.isNumber($scope.selectedIndex) || 
+    if ($scope.selectedIndex === -1 || !angular.isNumber($scope.selectedIndex) ||
         $scope.selectedIndex === self.indexOf(tab)) {
       self.select(tab);
     }
@@ -99,11 +99,12 @@ function MdTabsController($scope, $element, $mdUtil, $$rAF) {
     if (!tab || tab.isSelected || tab.isDisabled()) return;
     if (!tabsList.contains(tab)) return;
 
-    self.deselect(self.getSelectedItem());
+    var rightToLeft = self.indexOf(tab) < $scope.selectedIndex;
+    self.deselect(self.getSelectedItem(), rightToLeft);
 
     $scope.selectedIndex = self.indexOf(tab);
     tab.isSelected = true;
-    tab.onSelect();
+    tab.onSelect(rightToLeft);
 
     $scope.$broadcast('$mdTabsChanged');
   }
@@ -113,13 +114,13 @@ function MdTabsController($scope, $element, $mdUtil, $$rAF) {
     self.tabToFocus = tab;
   }
 
-  function deselect(tab) {
+  function deselect(tab, rightToLeft) {
     if (!tab || !tab.isSelected) return;
     if (!tabsList.contains(tab)) return;
 
     $scope.selectedIndex = -1;
     tab.isSelected = false;
-    tab.onDeselect();
+    tab.onDeselect(rightToLeft);
   }
 
   function next(tab, filterFn) {

src/components/tabs/tabs.scss

@@ -81,9 +81,38 @@ md-tabs[center] .md-header:not(.md-paginating) .md-header-items {
 .md-tabs-content {
   overflow: hidden;
   width: 100%;
-
+  position: relative;
   .md-tab-content {
-    height : 100%;
+    height: 100%;
+    &.ng-hide {
+      &.ng-animate {
+        display: block !important;
+      }
+    }
+    &.ng-animate {
+      transition: transform $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
+      transform: translateX(0);
+      &.ng-hide-add {
+        transform: translateX(-100%);
+        &.md-transition-rtl {
+          transform: translateX(100%);
+        }
+      }
+      &.ng-hide-remove {
+        position: absolute;
+        transform: translateX(100%);
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        &.md-transition-rtl {
+          transform: translateX(-100%);
+        }
+        &.ng-hide-remove-active {
+          transform: translateX(0);
+        }
+      }
+    }
   }
 }
 
@@ -144,5 +173,4 @@ md-tab {
     opacity: 1;
     overflow: hidden;
   }
-
 }