From d9e2c11afc7113734a901a93d266f6a824671dc1 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 19 Nov 2013 16:49:02 -0600 Subject: [PATCH] Better nav and title animation stuff --- dist/css/ionic.css | 8 ++-- dist/js/ionic-angular.js | 41 +++++++++++++++---- .../angular/src/directive/ionicNavRouter.js | 23 ++++++++--- js/ext/angular/src/directive/ionicTabBar.js | 18 ++++++-- js/ext/angular/test/navAndTabs.html | 5 ++- js/ext/angular/test/navRouter.html | 2 +- scss/_animations.scss | 8 ++-- 7 files changed, 76 insertions(+), 29 deletions(-) diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 38646fb22c..8a9fcbc6f4 100644 --- a/dist/css/ionic.css +++ b/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 { diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index d14e0fe7ce..56ca4faedc 100644 --- a/dist/js/ionic-angular.js +++ b/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('

')($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); diff --git a/js/ext/angular/src/directive/ionicNavRouter.js b/js/ext/angular/src/directive/ionicNavRouter.js index fdc0fd9b20..0c989eb9f3 100644 --- a/js/ext/angular/src/directive/ionicNavRouter.js +++ b/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('

')($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 = ''; diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js index e8df4af132..7c2d4b8a87 100644 --- a/js/ext/angular/src/directive/ionicTabBar.js +++ b/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); diff --git a/js/ext/angular/test/navAndTabs.html b/js/ext/angular/test/navAndTabs.html index ced699a4cd..8bb4eaca27 100644 --- a/js/ext/angular/test/navAndTabs.html +++ b/js/ext/angular/test/navAndTabs.html @@ -12,13 +12,14 @@ - +