Sexy title anim

dist/css/ionic.css

@@ -2934,8 +2934,7 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0); }
 .slide-left-right > .ng-leave.ng-leave-active, .slide-left-right.ng-leave.ng-leave-active {
   -webkit-transform: translate3d(-100%, 0, 0); }
-
+.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter, .slide-left-right.reverse > .ng-leave, .slide-left-right.reverse.ng-leave {
-.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter, .slide-left-right-reverse > .ng-leave, .slide-left-right-reverse.ng-leave {
   position: absolute;
   top: 0;
   left: 0;
@@ -2943,11 +2942,11 @@ a.button {
   bottom: 0;
   -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
   transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms; }
-.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter {
+.slide-left-right.reverse > .ng-enter, .slide-left-right.reverse.ng-enter {
   -webkit-transform: translate3d(-100%, 0, 0); }
-.slide-left-right-reverse > .ng-enter.ng-enter-active, .slide-left-right-reverse.ng-enter.ng-enter-active {
+.slide-left-right.reverse > .ng-enter.ng-enter-active, .slide-left-right.reverse.ng-enter.ng-enter-active {
   -webkit-transform: translate3d(0, 0, 0); }
-.slide-left-right-reverse > .ng-leave.ng-leave-active, .slide-left-right-reverse.ng-leave.ng-leave-active {
+.slide-left-right.reverse > .ng-leave.ng-leave-active, .slide-left-right.reverse.ng-leave.ng-leave-active {
   -webkit-transform: translate3d(100%, 0, 0); }
 
 .slide-left-right-ios7 > .ng-enter, .slide-left-right-ios7.ng-enter, .slide-left-right-ios7 > .ng-leave, .slide-left-right-ios7.ng-leave {
@@ -2968,8 +2967,7 @@ a.button {
   -webkit-transform: translate3d(0, 0, 0); }
 .slide-left-right-ios7 > .ng-leave.ng-leave-active, .slide-left-right-ios7.ng-leave.ng-leave-active {
   -webkit-transform: translate3d(-20%, 0, 0); }
-
+.slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.reverse.ng-enter, .slide-left-right-ios7.reverse > .ng-leave, .slide-left-right-ios7.reverse.ng-leave {
-.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter, .slide-left-right-ios7-reverse > .ng-leave, .slide-left-right-ios7-reverse.ng-leave {
   position: absolute;
   top: 0;
   left: 0;
@@ -2979,11 +2977,11 @@ a.button {
   -webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
   transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
   transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1); }
-.slide-left-right-ios7-reverse > .ng-enter, .slide-left-right-ios7-reverse.ng-enter {
+.slide-left-right-ios7.reverse > .ng-enter, .slide-left-right-ios7.reverse.ng-enter {
   -webkit-transform: translate3d(-20%, 0, 0); }
-.slide-left-right-ios7-reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7-reverse.ng-enter.ng-enter-active {
+.slide-left-right-ios7.reverse > .ng-enter.ng-enter-active, .slide-left-right-ios7.reverse.ng-enter.ng-enter-active {
   -webkit-transform: translate3d(0, 0, 0); }
-.slide-left-right-ios7-reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7-reverse.ng-leave.ng-leave-active {
+.slide-left-right-ios7.reverse > .ng-leave.ng-leave-active, .slide-left-right-ios7.reverse.ng-leave.ng-leave-active {
   -webkit-transform: translate3d(100%, 0, 0); }
 
 @-webkit-keyframes slideInLeft {
@@ -3209,6 +3207,43 @@ a.button {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg); } }
 
+/**
+ * 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-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition: all 250ms;
+  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 {
+  opacity: 0;
+  -webkit-transform: translate3d(30%, 0, 0); }
+.nav-title-slide-ios7 > .ng-enter.ng-enter-active, .nav-title-slide-ios7.ng-enter.ng-enter-active {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0); }
+.nav-title-slide-ios7 > .ng-leave.ng-leave-active, .nav-title-slide-ios7.ng-leave.ng-leave-active {
+  opacity: 0;
+  -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-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
+  transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
+  transition: all 250ms;
+  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 {
+  opacity: 0;
+  -webkit-transform: translate3d(-30%, 0, 0); }
+.reverse .nav-title-slide-ios7 > .ng-enter.ng-enter-active, .reverse .nav-title-slide-ios7.ng-enter.ng-enter-active {
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0); }
+.reverse .nav-title-slide-ios7 > .ng-leave.ng-leave-active, .reverse .nav-title-slide-ios7.ng-leave.ng-leave-active {
+  opacity: 0;
+  -webkit-transform: translate3d(30%, 0, 0); }
+
 /**
  * Grid
  * --------------------------------------------------

dist/js/ionic-angular.js

@@ -25293,8 +25293,13 @@ angular.module('ionic.ui.navRouter', [])
         isVisible: true
       };
 
+      this.setTitle = function(value) {
+        $scope.$broadcast('navRouter.titleChanged', value);
+      };
+
       $scope.navController = this;
     }],
+
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
@@ -25309,27 +25314,27 @@ angular.module('ionic.ui.navRouter', [])
       var reverseTransition = function() {
         console.log('REVERSE');
         $element.removeClass('noop-animation');
-        $element.removeClass($scope.animation);
+        $element.addClass($scope.animation);
-        $element.addClass($scope.animation + '-reverse');
+        $element.addClass('reverse');
       };
 
       var forwardTransition = function() {
         console.log('FORWARD');
         $element.removeClass('noop-animation');
-        $element.removeClass($scope.animation + '-reverse');
+        $element.removeClass('reverse');
         $element.addClass($scope.animation);
       };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
         console.log('ROUTE CHANGED', a, e);
       });
-      $scope.$on('$routeChangeStart', function(e, a) {
+      $scope.$on('$routeChangeStart', function(e, next, current) {
-        console.log('ROUTE START', a, e);
+        console.log('ROUTE START', e, next, current);
         var back, historyState = $window.history.state;
 
         back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
 
-        if(isFirst) {
+        if(isFirst || (next && next.$$route.originalPath === "")) {
           // Don't animate
           return;
         }
@@ -25341,9 +25346,9 @@ angular.module('ionic.ui.navRouter', [])
         }
       });
 
-      $scope.$on('$locationChangeSuccess', function() {
+      $scope.$on('$locationChangeSuccess', function(a, b, c) {
         // Store the new location
-        console.log('LOCATION CHANGE SUCCESS');
+        console.log('LOCATION CHANGE SUCCESS', a, b, c);
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
@@ -25389,7 +25394,30 @@ angular.module('ionic.ui.navRouter', [])
 /**
  * Our Nav Bar directive which updates as the controller state changes.
  */
-.directive('navBar', ['$rootScope', function($rootScope) {
+.directive('navBar', ['$rootScope', '$animate', function($rootScope, $animate) {
+  var animate = function($element, oldTitle, newTitle, cb) {
+    if(!oldTitle || oldTitle === newTitle) {
+      cb();
+      return;
+    }
+
+    var title, nTitle, titles = $element[0].querySelectorAll('.title');
+    if(titles.length > 1) {
+      nTitle = titles[0];
+      title = titles[1];
+    } else if(titles.length) {
+      title = titles[0];
+      nTitle = document.createElement('h1');
+      nTitle.className = 'title';
+      nTitle.appendChild(document.createTextNode(newTitle));
+
+      $animate.enter(angular.element(nTitle), $element, angular.element($element[0].firstElementChild));
+      $animate.leave(angular.element(title), function() {
+        cb();
+      });
+    }
+  };
+
   return {
     restrict: 'E',
     require: '^navRouter',
@@ -25402,12 +25430,11 @@ angular.module('ionic.ui.navRouter', [])
       alignTitle: '@',
     },
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
-        '<h1 class="title">{{navController.getTopController().scope.title}}</h1>' + 
+        '<h1 class="title" ng-bind="currentTitle"></h1>' + 
       '</header>',
     link: function($scope, $element, $attr, navCtrl) {
       var backButton;
-
       $scope.enableBackButton = true;
 
       $scope.backButtonContent = '';
@@ -25444,6 +25471,18 @@ angular.module('ionic.ui.navRouter', [])
 
       $scope.headerBarView = hb;
 
+      $scope.$parent.$on('navRouter.titleChanged', function(e, value) {
+        console.log(value);
+        console.log('Title changing from', $scope.currentTitle, 'to', value);
+        var oldTitle = $scope.currentTitle;
+        animate($element, oldTitle, value, function() {
+          $scope.currentTitle = value;
+          hb.align();
+        });
+      });
+
+
+      /*
       $scope.$parent.$on('navigation.push', function() {
         backButton = angular.element($element[0].querySelector('.button'));
         backButton.addClass($scope.backButtonType);
@@ -25452,6 +25491,7 @@ angular.module('ionic.ui.navRouter', [])
       $scope.$parent.$on('navigation.pop', function() {
         hb.align();
       });
+      */
 
       $scope.$on('$destroy', function() {
         //
@@ -25460,6 +25500,26 @@ angular.module('ionic.ui.navRouter', [])
   };
 }])
 
+.directive('navPage', ['$parse', function($parse) {
+  return {
+    restrict: 'E',
+    scope: true,
+    require: '^navRouter',
+    link: function($scope, $element, $attr, navCtrl) {
+      $element.addClass('pane');
+
+      var titleGet = $parse($attr.title);
+
+      $scope.$watch(titleGet, function(value) {
+        console.log('Title changed');
+        $scope.title = value;
+        navCtrl.setTitle(value);
+      });
+
+    }
+  }
+}])
+
 .directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
   return {
     restrict: 'AC',

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

@@ -34,8 +34,13 @@ angular.module('ionic.ui.navRouter', [])
         isVisible: true
       };
 
+      this.setTitle = function(value) {
+        $scope.$broadcast('navRouter.titleChanged', value);
+      };
+
       $scope.navController = this;
     }],
+
     link: function($scope, $element, $attr) {
       $scope.animation = $attr.animation;
 
@@ -50,27 +55,27 @@ angular.module('ionic.ui.navRouter', [])
       var reverseTransition = function() {
         console.log('REVERSE');
         $element.removeClass('noop-animation');
-        $element.removeClass($scope.animation);
+        $element.addClass($scope.animation);
-        $element.addClass($scope.animation + '-reverse');
+        $element.addClass('reverse');
       };
 
       var forwardTransition = function() {
         console.log('FORWARD');
         $element.removeClass('noop-animation');
-        $element.removeClass($scope.animation + '-reverse');
+        $element.removeClass('reverse');
         $element.addClass($scope.animation);
       };
 
       $scope.$on('$routeChangeSuccess', function(e, a) {
         console.log('ROUTE CHANGED', a, e);
       });
-      $scope.$on('$routeChangeStart', function(e, a) {
+      $scope.$on('$routeChangeStart', function(e, next, current) {
-        console.log('ROUTE START', a, e);
+        console.log('ROUTE START', e, next, current);
         var back, historyState = $window.history.state;
 
         back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
 
-        if(isFirst) {
+        if(isFirst || (next && next.$$route.originalPath === "")) {
           // Don't animate
           return;
         }
@@ -82,9 +87,9 @@ angular.module('ionic.ui.navRouter', [])
         }
       });
 
-      $scope.$on('$locationChangeSuccess', function() {
+      $scope.$on('$locationChangeSuccess', function(a, b, c) {
         // Store the new location
-        console.log('LOCATION CHANGE SUCCESS');
+        console.log('LOCATION CHANGE SUCCESS', a, b, c);
         $rootScope.actualLocation = $location.path();
         if(isFirst) {
           isFirst = false;
@@ -130,7 +135,30 @@ angular.module('ionic.ui.navRouter', [])
 /**
  * Our Nav Bar directive which updates as the controller state changes.
  */
-.directive('navBar', ['$rootScope', function($rootScope) {
+.directive('navBar', ['$rootScope', '$animate', function($rootScope, $animate) {
+  var animate = function($element, oldTitle, newTitle, cb) {
+    if(!oldTitle || oldTitle === newTitle) {
+      cb();
+      return;
+    }
+
+    var title, nTitle, titles = $element[0].querySelectorAll('.title');
+    if(titles.length > 1) {
+      nTitle = titles[0];
+      title = titles[1];
+    } else if(titles.length) {
+      title = titles[0];
+      nTitle = document.createElement('h1');
+      nTitle.className = 'title';
+      nTitle.appendChild(document.createTextNode(newTitle));
+
+      $animate.enter(angular.element(nTitle), $element, angular.element($element[0].firstElementChild));
+      $animate.leave(angular.element(title), function() {
+        cb();
+      });
+    }
+  };
+
   return {
     restrict: 'E',
     require: '^navRouter',
@@ -143,12 +171,11 @@ angular.module('ionic.ui.navRouter', [])
       alignTitle: '@',
     },
     template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' + 
-        '<button ng-click="goBack()" class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
+        '<button nav-back class="button" ng-if="enableBackButton && showBackButton" ng-class="backButtonType" ng-bind-html="backButtonContent"></button>' +
-        '<h1 class="title">{{navController.getTopController().scope.title}}</h1>' + 
+        '<h1 class="title" ng-bind="currentTitle"></h1>' + 
       '</header>',
     link: function($scope, $element, $attr, navCtrl) {
       var backButton;
-
       $scope.enableBackButton = true;
 
       $scope.backButtonContent = '';
@@ -185,6 +212,18 @@ angular.module('ionic.ui.navRouter', [])
 
       $scope.headerBarView = hb;
 
+      $scope.$parent.$on('navRouter.titleChanged', function(e, value) {
+        console.log(value);
+        console.log('Title changing from', $scope.currentTitle, 'to', value);
+        var oldTitle = $scope.currentTitle;
+        animate($element, oldTitle, value, function() {
+          $scope.currentTitle = value;
+          hb.align();
+        });
+      });
+
+
+      /*
       $scope.$parent.$on('navigation.push', function() {
         backButton = angular.element($element[0].querySelector('.button'));
         backButton.addClass($scope.backButtonType);
@@ -193,6 +232,7 @@ angular.module('ionic.ui.navRouter', [])
       $scope.$parent.$on('navigation.pop', function() {
         hb.align();
       });
+      */
 
       $scope.$on('$destroy', function() {
         //
@@ -201,6 +241,26 @@ angular.module('ionic.ui.navRouter', [])
   };
 }])
 
+.directive('navPage', ['$parse', function($parse) {
+  return {
+    restrict: 'E',
+    scope: true,
+    require: '^navRouter',
+    link: function($scope, $element, $attr, navCtrl) {
+      $element.addClass('pane');
+
+      var titleGet = $parse($attr.title);
+
+      $scope.$watch(titleGet, function(value) {
+        console.log('Title changed');
+        $scope.title = value;
+        navCtrl.setTitle(value);
+      });
+
+    }
+  }
+}])
+
 .directive('navBack', ['$window', '$rootScope', function($window, $rootScope) {
   return {
     restrict: 'AC',

js/ext/angular/test/navRouter.html

@@ -12,37 +12,37 @@
   </head>
   <body>
     <pane nav-router animation="slide-left-right">
-      <nav-bar back-button-type="button-icon" back-button-icon="icon ion-arrow-left-c"></nav-bar>
+      <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>
       <ng-view></ng-view>
     </pane>
 
     <script id="page1.html" type="text/ng-template">
-      <pane>
+      <nav-page title="'Bears'">
         <h1>Page 1</h1>
         <span>{{num}}</span>
         <a class="button button-pure" nav-back>Back</a>
         <a class="button button-assertive" href="#/page2">Next</a>
-      </pane>
+      </nav-page>
     </script>
     <script id="page2.html" type="text/ng-template">
-      <pane>
+      <nav-page title="'Beets'">
         <h1>Page 2</h1>
         <a class="button button-pure" nav-back>Back</a>
         <a class="button button-assertive" href="#/page3">Next</a>
-      </pane>
+      </nav-page>
     </script>
     <script id="page3.html" type="text/ng-template">
-      <pane>
+      <nav-page title="'Battlestar Galactica'">
         <h1>Page 3</h1>
         <a class="button button-pure" nav-back>Back</a>
-      </pane>
+      </nav-page>
     </script>
     <script>
       angular.module('navTest', ['ionic'])
 
 
       .config(function($routeProvider, $locationProvider) {
-        $routeProvider.when('/page1', {
+        $routeProvider.when('/', {
           templateUrl: 'page1.html',
           controller: 'Page1Ctrl'
         });
@@ -54,9 +54,6 @@
         $routeProvider.when('/page3', {
           templateUrl: 'page3.html',
         });
-        $routeProvider.otherwise({
-          redirectTo: '/page1'
-        });
 
         // configure html5 to get links working on jsfiddle
         //$locationProvider.html5Mode(true);

scss/_animations.scss

@@ -39,8 +39,8 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
   > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
     -webkit-transform: translate3d(-100%, 0, 0);
   }
-}
+
-.slide-left-right-reverse {
+  &.reverse {
     > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
       position:absolute;
       top:0;
@@ -60,7 +60,7 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
       -webkit-transform: translate3d(100%, 0, 0);
     }
   }
-
+}
 .slide-left-right-ios7 {
   > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
     position:absolute;
@@ -84,8 +84,8 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
   > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
     -webkit-transform: translate3d(-20%, 0, 0);
   }
-}
+  
-.slide-left-right-ios7-reverse {
+  &.reverse {
     > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
       position:absolute;
       top:0;
@@ -107,6 +107,7 @@ $ios7-timing-function: cubic-bezier(.1, .7, .1, 1);
       -webkit-transform: translate3d(100%, 0, 0);
     }
   }
+}
 
 @-webkit-keyframes slideInLeft {
   0% {
@@ -373,3 +374,57 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
   } 
 }
 
+
+
+/**
+ * Some component specific animations
+ */
+
+.nav-title-slide-ios7 {
+  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+    -webkit-transition:all 250ms;
+    -webkit-transition-timing-function: $ios7-timing-function;
+    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+    transition:all 250ms;
+    transition-timing-function: $ios7-timing-function;
+    opacity: 1;
+  }
+  > .ng-enter, &.ng-enter {
+    opacity: 0;
+    -webkit-transform: translate3d(30%, 0, 0);
+  }
+  > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+    opacity: 1;
+    -webkit-transform: translate3d(0, 0, 0);
+  }
+  > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+    opacity: 0;
+    -webkit-transform: translate3d(-30%, 0, 0);
+  }
+
+}
+.reverse {
+  .nav-title-slide-ios7 {
+    > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
+      -webkit-transition:all 250ms;
+      -webkit-transition-timing-function: $ios7-timing-function;
+      transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
+      transition:all 250ms;
+      transition-timing-function: $ios7-timing-function;
+      opacity: 1;
+    }
+    > .ng-enter, &.ng-enter {
+      opacity: 0;
+      -webkit-transform: translate3d(-30%, 0, 0);
+    }
+    > .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
+      opacity: 1;
+      -webkit-transform: translate3d(0, 0, 0);
+    }
+    > .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
+      opacity: 0;
+      -webkit-transform: translate3d(30%, 0, 0);
+    }
+
+  }
+}