feat(ionNavBar): make back button animated

Closes #1030

js/ext/angular/src/directive/ionicNavBar.js

@@ -372,12 +372,15 @@ function($ionicViewService, $rootScope, $animate, $compile) {
  * }
  * ```
  */
-.directive('ionNavBackButton', ['$ionicNgClick', function($ionicNgClick) {
+.directive('ionNavBackButton', [
+  '$ionicNgClick',
+  '$animate',
+function($ionicNgClick, $animate) {
   return {
     restrict: 'E',
     require: '^ionNavBar',
     compile: function(tElement, tAttrs) {
-      tElement.addClass('button back-button');
+      tElement.addClass('button back-button ng-hide');
       return function($scope, $element, $attr, navBarCtrl) {
         if (!$attr.ngClick) {
           $scope.$navBack = navBarCtrl.back;
@@ -396,9 +399,10 @@ function($ionicViewService, $rootScope, $animate, $compile) {
 
         //Make sure both that a backButton is allowed in the first place,
         //and that it is shown by the current view.
-        $scope.$watch('!!(backButtonShown && hasBackButton)', function(show) {
-          $element.toggleClass('hide', !show);
-        });
+        $scope.$watch('!!(backButtonShown && hasBackButton)', ionic.animationFrameThrottle(function(show) {
+          if (show) $animate.removeClass($element, 'ng-hide');
+          else $animate.addClass($element, 'ng-hide');
+        }));
       };
     }
   };

js/ext/angular/test/directive/ionicNavBackButton.unit.js

@@ -2,7 +2,7 @@ describe('ionNavBackButton directive', function() {
   beforeEach(module('ionic', function($compileProvider) {
     $compileProvider.directive('needsScroll', function() {
       return {
-        //Test if the buttons are 'children of ionScroll' when compiled 
+        //Test if the buttons are 'children of ionScroll' when compiled
         require: '^$ionicScroll',
         link: function(scope, element, attrs, ctrl) {
           element.data('scrollCtrl', ctrl);
@@ -24,7 +24,7 @@ describe('ionNavBackButton directive', function() {
     return el;
   }
 
-  it('should compile buttons with same scope & access the same data on compile', inject(function($compile, $rootScope) {
+  it('ionNavButtons should compile buttons with same scope & access the same data on compile', inject(function($compile, $rootScope) {
     var el = $compile('<div>' +
      '<ion-nav-bar></ion-nav-bar>' +
      '<ion-view>' +
@@ -66,16 +66,17 @@ describe('ionNavBackButton directive', function() {
   });
 
   it('should hide based on backButtonShown && hasBackButton', function() {
+    ionic.animationFrameThrottle = function(cb) { return cb; };
     var el = setup();
-    expect(el.hasClass('hide')).toBe(true);
+    expect(el.hasClass('ng-hide')).toBe(true);
     el.scope().$apply('backButtonShown = true; hasBackButton = true');
-    expect(el.hasClass('hide')).toBe(false);
+    expect(el.hasClass('ng-hide')).toBe(false);
     el.scope().$apply('backButtonShown = false; hasBackButton = true');
-    expect(el.hasClass('hide')).toBe(true);
+    expect(el.hasClass('ng-hide')).toBe(true);
     el.scope().$apply('backButtonShown = true; hasBackButton = false');
-    expect(el.hasClass('hide')).toBe(true);
+    expect(el.hasClass('ng-hide')).toBe(true);
     el.scope().$apply('backButtonShown = true; hasBackButton = true');
-    expect(el.hasClass('hide')).toBe(false);
+    expect(el.hasClass('ng-hide')).toBe(false);
   });
 
   it('should transclude content', function() {

js/ext/angular/test/service/ionicActivator.unit.js

@@ -1,6 +1,8 @@
 describe('Ionic Element Activator', function() {
 
-  window.setTimeout = ionic.requestAnimationFrame = function(cb) { cb(); };
+  beforeEach(function() {
+    window.setTimeout = ionic.requestAnimationFrame = function(cb) { cb(); };
+  });
 
   it('Should activate an <a>', function() {
     var e = { target: document.createElement('a') };

scss/_animations.scss

@@ -541,11 +541,27 @@ $ios7-transition-duration: 250ms;
 }
 
 
+
 /**
  * Some component specific animations
  */
 $nav-title-slide-ios7-delay: 250ms;
 .nav-title-slide-ios7 {
+  .button.back-button {
+    @include transition(all $nav-title-slide-ios7-delay);
+    @include transition-timing-function($ios7-timing-function);
+
+    @include translate3d(0%, 0, 0);
+    opacity: 1;
+    &.ng-hide {
+      opacity: 0;
+      @include translate3d(30%, 0, 0);
+    }
+    &.ng-hide-add,
+    &.ng-hide-remove {
+      display: block !important;
+    }
+  }
   > .ng-enter, &.ng-enter,
   > .ng-leave, &.ng-leave {
     @include transition(all $nav-title-slide-ios7-delay);