Better nav and title animation stuff

dist/css/ionic.css

@@ -3249,9 +3249,9 @@ a.button {
  * Some component specific animations
  */
 .nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter, .nav-title-slide-ios7 > .ng-leave, .nav-title-slide-ios7.ng-leave {
-  -webkit-transition: all 250ms;
+  -webkit-transition: all 350ms;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition: all 250ms;
+  transition: all 350ms;
   transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   opacity: 1; }
 .nav-title-slide-ios7 > .ng-enter, .nav-title-slide-ios7.ng-enter {
@@ -3265,9 +3265,9 @@ a.button {
   -webkit-transform: translate3d(-30%, 0, 0); }
 
 .reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter, .reverse .nav-title-slide-ios7 > .ng-leave, .reverse .nav-title-slide-ios7.ng-leave {
-  -webkit-transition: all 250ms;
+  -webkit-transition: all 350ms;
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-  transition: all 250ms;
+  transition: all 350ms;
   transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   opacity: 1; }
 .reverse .nav-title-slide-ios7 > .ng-enter, .reverse .nav-title-slide-ios7.ng-enter {

dist/js/ionic-angular.js

@@ -25344,9 +25344,8 @@ angular.module('ionic.ui.navRouter', [])
       $scope.$on('$locationChangeSuccess', function(a, b, c) {
         // Store the new location
         $rootScope.actualLocation = $location.path();
-        if(isFirst) {
+        if(isFirst && $location.path() !== '/') {
           isFirst = false;
-          initTransition();
         }
       });  
 
@@ -25356,6 +25355,11 @@ angular.module('ionic.ui.navRouter', [])
       $scope.$watch(function () { return $location.path() }, function (newLocation, oldLocation) {
         if($rootScope.actualLocation === newLocation) {
 
+          if(oldLocation == '' && newLocation == '/') {
+            // initial route, skip this
+            return;
+          }
+
           var back, historyState = $window.history.state;
 
           back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
@@ -25389,6 +25393,11 @@ angular.module('ionic.ui.navRouter', [])
  * Our Nav Bar directive which updates as the controller state changes.
  */
 .directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
+
+  /**
+   * Perform an animation between one tab bar state and the next.
+   * Right now this just animates the titles.
+   */
   var animate = function($scope, $element, oldTitle, data, cb) {
     var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
 
@@ -25398,6 +25407,7 @@ angular.module('ionic.ui.navRouter', [])
       return;
     }
 
+    // Clone the old title and add a new one so we can show two animating in and out
     title = angular.element(titles[0]);
     oTitle = $compile('<h1 class="title" ng-bind="oldTitle"></h1>')($scope);
     title.replaceWith(oTitle);
@@ -25405,14 +25415,13 @@ angular.module('ionic.ui.navRouter', [])
 
     var insert = $element[0].firstElementChild || null;
 
+    // Insert the new title
     $animate.enter(nTitle, $element, insert && angular.element(insert), function() {
       cb();
     });
-    $animate.leave(angular.element(oTitle), function() {
-    });
 
-    $scope.$on('navRouter.rightButtonsChanged', function(e, buttons) {
-      console.log('Buttons changing for nav bar', buttons);
+    // Remove the old title
+    $animate.leave(angular.element(oTitle), function() {
     });
   };
 
@@ -25440,6 +25449,8 @@ angular.module('ionic.ui.navRouter', [])
     link: function($scope, $element, $attr, navCtrl) {
       var backButton;
 
+      $element.addClass($attr.animation);
+
       // Create the back button content and show/hide it based on scope settings
       $scope.enableBackButton = true;
       $scope.backButtonContent = '';
@@ -25966,6 +25977,11 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
         $scope.tabsStyle = $attr.tabsStyle;
         $scope.animation = $attr.animation;
 
+        $scope.animateNav = $scope.$eval($attr.animateNav);
+        if($scope.animateNav !== false) {
+          $scope.animateNav = true;
+        }
+
         $attr.$observe('tabsStyle', function(val) {
           if(tabs) {
             angular.element(tabs).addClass($attr.tabsStyle);
@@ -26010,12 +26026,19 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
         // Should we hide a back button when this tab is shown
         $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
 
+        if($scope.hideBackButton !== true) {
+          $scope.hideBackButton = true;
+        }
+
         // Whether we should animate on tab change, also impacts whether we
         // tell any parent nav controller to animate
         $scope.animate = $scope.$eval($attr.animate);
 
         // Grab whether we should update any parent nav router on tab changes
-        $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+        $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter);
+        if($scope.doesUpdateNavRouter !== false) {
+          $scope.doesUpdateNavRouter = true;
+        }
 
         var leftButtonsGet = $parse($attr.leftButtons);
         $scope.$watch(leftButtonsGet, function(value) {
@@ -26055,8 +26078,8 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
                     title: $scope.title,
                     rightButtons: $scope.rightButtons,
                     leftButtons: $scope.leftButtons,
-                    hideBackButton: $scope.hideBackButton || false,
-                    animate: $scope.animate || true
+                    hideBackButton: $scope.hideBackButton,
+                    animate: $scope.animateNav
                   });
                 }
                 //$scope.$emit('navRouter.titleChanged', $scope.title);

js/ext/angular/src/directive/ionicNavRouter.js

@@ -81,9 +81,8 @@ angular.module('ionic.ui.navRouter', [])
       $scope.$on('$locationChangeSuccess', function(a, b, c) {
         // Store the new location
         $rootScope.actualLocation = $location.path();
-        if(isFirst) {
+        if(isFirst && $location.path() !== '/') {
           isFirst = false;
-          initTransition();
         }
       });  
 
@@ -93,6 +92,11 @@ angular.module('ionic.ui.navRouter', [])
       $scope.$watch(function () { return $location.path() }, function (newLocation, oldLocation) {
         if($rootScope.actualLocation === newLocation) {
 
+          if(oldLocation == '' && newLocation == '/') {
+            // initial route, skip this
+            return;
+          }
+
           var back, historyState = $window.history.state;
 
           back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
@@ -126,6 +130,11 @@ angular.module('ionic.ui.navRouter', [])
  * Our Nav Bar directive which updates as the controller state changes.
  */
 .directive('navBar', ['$rootScope', '$animate', '$compile', function($rootScope, $animate, $compile) {
+
+  /**
+   * Perform an animation between one tab bar state and the next.
+   * Right now this just animates the titles.
+   */
   var animate = function($scope, $element, oldTitle, data, cb) {
     var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');
 
@@ -135,6 +144,7 @@ angular.module('ionic.ui.navRouter', [])
       return;
     }
 
+    // Clone the old title and add a new one so we can show two animating in and out
     title = angular.element(titles[0]);
     oTitle = $compile('<h1 class="title" ng-bind="oldTitle"></h1>')($scope);
     title.replaceWith(oTitle);
@@ -142,14 +152,13 @@ angular.module('ionic.ui.navRouter', [])
 
     var insert = $element[0].firstElementChild || null;
 
+    // Insert the new title
     $animate.enter(nTitle, $element, insert && angular.element(insert), function() {
       cb();
     });
-    $animate.leave(angular.element(oTitle), function() {
-    });
 
-    $scope.$on('navRouter.rightButtonsChanged', function(e, buttons) {
-      console.log('Buttons changing for nav bar', buttons);
+    // Remove the old title
+    $animate.leave(angular.element(oTitle), function() {
     });
   };
 
@@ -177,6 +186,8 @@ angular.module('ionic.ui.navRouter', [])
     link: function($scope, $element, $attr, navCtrl) {
       var backButton;
 
+      $element.addClass($attr.animation);
+
       // Create the back button content and show/hide it based on scope settings
       $scope.enableBackButton = true;
       $scope.backButtonContent = '';

js/ext/angular/src/directive/ionicTabBar.js

@@ -60,6 +60,11 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
         $scope.tabsStyle = $attr.tabsStyle;
         $scope.animation = $attr.animation;
 
+        $scope.animateNav = $scope.$eval($attr.animateNav);
+        if($scope.animateNav !== false) {
+          $scope.animateNav = true;
+        }
+
         $attr.$observe('tabsStyle', function(val) {
           if(tabs) {
             angular.element(tabs).addClass($attr.tabsStyle);
@@ -104,12 +109,19 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
         // Should we hide a back button when this tab is shown
         $scope.hideBackButton = $scope.$eval($attr.hideBackButton);
 
+        if($scope.hideBackButton !== true) {
+          $scope.hideBackButton = true;
+        }
+
         // Whether we should animate on tab change, also impacts whether we
         // tell any parent nav controller to animate
         $scope.animate = $scope.$eval($attr.animate);
 
         // Grab whether we should update any parent nav router on tab changes
-        $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter) || true;
+        $scope.doesUpdateNavRouter = $scope.$eval($attr.doesUpdateNavRouter);
+        if($scope.doesUpdateNavRouter !== false) {
+          $scope.doesUpdateNavRouter = true;
+        }
 
         var leftButtonsGet = $parse($attr.leftButtons);
         $scope.$watch(leftButtonsGet, function(value) {
@@ -149,8 +161,8 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
                     title: $scope.title,
                     rightButtons: $scope.rightButtons,
                     leftButtons: $scope.leftButtons,
-                    hideBackButton: $scope.hideBackButton || false,
-                    animate: $scope.animate || true
+                    hideBackButton: $scope.hideBackButton,
+                    animate: $scope.animateNav
                   });
                 }
                 //$scope.$emit('navRouter.titleChanged', $scope.title);

js/ext/angular/test/navAndTabs.html

@@ -12,13 +12,14 @@
   </head>
   <body>
     <pane nav-router animation="slide-left-right">
-      <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
+      <nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
       <ng-view></ng-view>
     </pane>
 
     <script id="page1.html" type="text/ng-template">
       <nav-page hide-back-button="true">
-        <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive">
+
+        <tabs tabs-style="tabs-icon-top" tabs-type="tabs-positive" animate-nav="false">
 
           <!-- Pets tab -->
           <tab title="Pets" icon="icon ion-home" ng-controller="PetsCtrl">

js/ext/angular/test/navRouter.html

@@ -12,7 +12,7 @@
   </head>
   <body>
     <pane nav-router animation="slide-left-right">
-      <nav-bar class="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
+      <nav-bar animation="nav-title-slide-ios7" type="bar-positive" back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
       <ng-view></ng-view>
     </pane>
 

scss/_animations.scss

@@ -382,9 +382,9 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
 
 .nav-title-slide-ios7 {
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
-    -webkit-transition:all 250ms;
+    -webkit-transition:all 350ms;
     -webkit-transition-timing-function: $ios7-timing-function;
-    transition:all 250ms;
+    transition:all 350ms;
     transition-timing-function: $ios7-timing-function;
     opacity: 1;
   }
@@ -405,9 +405,9 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
 .reverse {
   .nav-title-slide-ios7 {
     > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
-      -webkit-transition:all 250ms;
+      -webkit-transition:all 350ms;
       -webkit-transition-timing-function: $ios7-timing-function;
-      transition:all 250ms;
+      transition:all 350ms;
       transition-timing-function: $ios7-timing-function;
       opacity: 1;
     }