From 01f689e58f56b35302574f601790bcbea186affd Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Fri, 1 Nov 2013 18:33:13 -0500 Subject: [PATCH] Better animation naming and control system. --- dist/css/ionic-ios7.css | 80 ++---------- dist/css/ionic-scoped.css | 75 ++--------- dist/css/ionic.css | 155 +++++++++++++---------- dist/js/ionic-angular.js | 31 ++++- js/ext/angular/src/directive/ionicNav.js | 31 ++++- js/ext/angular/test/nav.html | 2 +- scss/ionic/_animations.scss | 93 -------------- scss/ionic/animations/_bar_ios7.scss | 111 ++++++++++++++++ scss/ionic/ionic.scss | 2 + 9 files changed, 270 insertions(+), 310 deletions(-) create mode 100644 scss/ionic/animations/_bar_ios7.scss diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index a29c1f8bc5..a9abfaba06 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -182,7 +182,7 @@ sub { fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; - border: 1px solid #c0c0c0; } + border: 1px solid silver; } /** * 1. Correct `color` not being inherited in IE 8/9. @@ -1682,7 +1682,7 @@ input[type="file"] { line-height: 34px; } select { - border: 1px solid #ccc; + border: 1px solid #cccccc; background-color: white; } select[multiple], @@ -1754,7 +1754,7 @@ input[type="checkbox"][readonly] { right: 20px; transition: 0.2s ease; transition-property: left, right; - transition-delay: 0s, .05s; } + transition-delay: 0s, 0.05s; } .toggle :checked + .track { /* When the toggle is "on" */ @@ -1769,7 +1769,7 @@ input[type="checkbox"][readonly] { right: 0; left: 20px; -webkit-transform: none; - transition-delay: .05s, 0s; } + transition-delay: 0.05s, 0s; } .item-radio { padding: 0; } @@ -2054,7 +2054,7 @@ input[type="range"] { .button.button-icon:active, .button.button-icon.active { background: none; box-shadow: none; - text-shadow: 0px 0px 10px #fff; } + text-shadow: 0px 0px 10px white; } .button.block, .button.button-full { margin-top: 10px; margin-bottom: 10px; } @@ -2265,64 +2265,6 @@ a.button { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } -.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter { - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(100%, 0, 0); - box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } -.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active { - -webkit-transform: translate3d(0, 0, 0); } -.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave { - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(0%, 0, 0); } -.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active { - -webkit-transform: translate3d(-10%, 0, 0); - opacity: 0.8; } - -.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter { - z-index: 1; - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(-100%, 0, 0); - box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } -.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active { - -webkit-transform: translate3d(0, 0, 0); } -.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave { - z-index: 0; - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(0%, 0, 0); } -.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active { - -webkit-transform: translate3d(10%, 0, 0); - opacity: 0.8; } - -/** - * An animation that fades out one content area and fades in another - */ -.fade-in-out.ng-enter, .fade-in-out > .ng-enter { - opacity: 0; - -webkit-transition: opacity 0.3s ease-in-out; } -.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active { - opacity: 1; } -.fade-in-out.ng-leave, .fade-in-out > .ng-leave { - opacity: 1; - -webkit-transition: opacity 0.3s ease-in-out; } -.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active { - opacity: 0; } - -.slide-left-fade-add { - -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } - -.slide-left-fade-add-active { - -webkit-transform: translate3d(-100%, 0, 0); - opacity: 0; } - -.slide-in-left-fade-add { - -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; - -webkit-transform: translate3d(100%, 0, 0); - opacity: 0; } - -.slide-in-left-fade-add-active { - -webkit-transform: translate3d(0px, 0, 0); - opacity: 1; } - @-webkit-keyframes fadeOut { from { opacity: 1; } @@ -2453,9 +2395,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .icon-loading:before { content: "\e144"; } @@ -2468,9 +2410,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .icon-refreshing:before { content: "\e144"; } diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index 2fa3c3be26..96f77c643f 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -168,9 +168,6 @@ /* the handle when the toggle is "on" */ /* make sure list item content have enough padding on right to fit the toggle */ /* position the toggle to the right within a list item */ - /** - * An animation that fades out one content area and fades in another - */ @-webkit-keyframes fadeOut { from { opacity: 1; } @@ -213,7 +210,7 @@ transform: rotate(360deg); } } } .ionic i, .ionic .icon { - font-family: 'ionicons' !important; + font-family: "ionicons" !important; speak: none !important; font-style: normal !important; font-weight: normal !important; @@ -1195,7 +1192,7 @@ .ionic fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; - border: 1px solid #c0c0c0; } + border: 1px solid silver; } .ionic legend { padding: 0; /* 2 */ @@ -2505,7 +2502,7 @@ .ionic input[type="file"] { line-height: 34px; } .ionic select { - border: 1px solid #ccc; + border: 1px solid #cccccc; background-color: white; } .ionic select[multiple], .ionic select[size] { @@ -2554,7 +2551,7 @@ border-radius: 50%; background: white; content: ' '; - transition: background-color .1s ease-in-out; } + transition: background-color 0.1s ease-in-out; } .ionic .checkbox input:after { position: absolute; top: 34%; @@ -2567,7 +2564,7 @@ border-right: 0; content: ' '; opacity: 0; - transition: opacity .05s ease-in-out; + transition: opacity 0.05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .ionic .checkbox input:checked:before { @@ -2919,7 +2916,7 @@ .ionic .button.button-icon:active, .ionic .button.button-icon.active { background: none; box-shadow: none; - text-shadow: 0px 0px 10px #fff; } + text-shadow: 0px 0px 10px white; } .ionic .button.block, .ionic .button.button-full { margin-top: 10px; margin-bottom: 10px; } @@ -3092,54 +3089,6 @@ opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } - .ionic .slide-in-slide-out.ng-enter, .ionic .slide-in-slide-out > .ng-enter { - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(100%, 0, 0); - box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } - .ionic .slide-in-slide-out.ng-enter-active, .ionic .slide-in-slide-out > .ng-enter-active { - -webkit-transform: translate3d(0, 0, 0); } - .ionic .slide-in-slide-out.ng-leave, .ionic .slide-in-slide-out > .ng-leave { - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(0%, 0, 0); } - .ionic .slide-in-slide-out.ng-leave-active, .ionic .slide-in-slide-out > .ng-leave-active { - -webkit-transform: translate3d(-10%, 0, 0); - opacity: 0.8; } - .ionic .slide-in-slide-out-reverse.ng-enter, .ionic .slide-in-slide-out-reverse > .ng-enter { - z-index: 1; - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(-100%, 0, 0); - box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } - .ionic .slide-in-slide-out-reverse.ng-enter-active, .ionic .slide-in-slide-out-reverse > .ng-enter-active { - -webkit-transform: translate3d(0, 0, 0); } - .ionic .slide-in-slide-out-reverse.ng-leave, .ionic .slide-in-slide-out-reverse > .ng-leave { - z-index: 0; - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(0%, 0, 0); } - .ionic .slide-in-slide-out-reverse.ng-leave-active, .ionic .slide-in-slide-out-reverse > .ng-leave-active { - -webkit-transform: translate3d(10%, 0, 0); - opacity: 0.8; } - .ionic .fade-in-out.ng-enter, .ionic .fade-in-out > .ng-enter { - opacity: 0; - -webkit-transition: opacity 0.3s ease-in-out; } - .ionic .fade-in-out.ng-enter-active, .ionic .fade-in-out > .ng-enter-active { - opacity: 1; } - .ionic .fade-in-out.ng-leave, .ionic .fade-in-out > .ng-leave { - opacity: 1; - -webkit-transition: opacity 0.3s ease-in-out; } - .ionic .fade-in-out.ng-leave-active, .ionic .fade-in-out > .ng-leave-active { - opacity: 0; } - .ionic .slide-left-fade-add { - -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } - .ionic .slide-left-fade-add-active { - -webkit-transform: translate3d(-100%, 0, 0); - opacity: 0; } - .ionic .slide-in-left-fade-add { - -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; - -webkit-transform: translate3d(100%, 0, 0); - opacity: 0; } - .ionic .slide-in-left-fade-add-active { - -webkit-transform: translate3d(0px, 0, 0); - opacity: 1; } .ionic .fade-in { -webkit-animation: fadeOut 0.3s; animation: fadeOut 0.3s; } @@ -3214,9 +3163,9 @@ line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .ionic .icon-loading:before { content: "\e144"; } .ionic .icon-refreshing { @@ -3228,9 +3177,9 @@ line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .ionic .icon-refreshing:before { content: "\e144"; } .ionic .hidden, diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 85f7d260c1..fc147c573f 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -7,7 +7,7 @@ font-style: normal; } i, .icon { - font-family: 'ionicons' !important; + font-family: "ionicons" !important; speak: none !important; font-style: normal !important; font-weight: normal !important; @@ -1521,7 +1521,7 @@ sub { fieldset { margin: 0 2px; padding: 0.35em 0.625em 0.75em; - border: 1px solid #c0c0c0; } + border: 1px solid silver; } /** * 1. Correct `color` not being inherited in IE 8/9. @@ -3085,7 +3085,7 @@ input[type="file"] { line-height: 34px; } select { - border: 1px solid #ccc; + border: 1px solid #cccccc; background-color: white; } select[multiple], @@ -3140,7 +3140,7 @@ input[type="checkbox"][readonly] { border-radius: 50%; background: white; content: ' '; - transition: background-color .1s ease-in-out; } + transition: background-color 0.1s ease-in-out; } /* the checkmark within the box */ .checkbox input:after { @@ -3155,7 +3155,7 @@ input[type="checkbox"][readonly] { border-right: 0; content: ' '; opacity: 0; - transition: opacity .05s ease-in-out; + transition: opacity 0.05s ease-in-out; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } @@ -3535,7 +3535,7 @@ input[type="range"] { .button.button-icon:active, .button.button-icon.active { background: none; box-shadow: none; - text-shadow: 0px 0px 10px #fff; } + text-shadow: 0px 0px 10px white; } .button.block, .button.button-full { margin-top: 10px; margin-bottom: 10px; } @@ -3851,64 +3851,6 @@ a.button { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } -.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter { - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(100%, 0, 0); - box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } -.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active { - -webkit-transform: translate3d(0, 0, 0); } -.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave { - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(0%, 0, 0); } -.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active { - -webkit-transform: translate3d(-10%, 0, 0); - opacity: 0.8; } - -.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter { - z-index: 1; - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(-100%, 0, 0); - box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } -.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active { - -webkit-transform: translate3d(0, 0, 0); } -.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave { - z-index: 0; - -webkit-transition: 0.5s ease-in-out all; - -webkit-transform: translate3d(0%, 0, 0); } -.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active { - -webkit-transform: translate3d(10%, 0, 0); - opacity: 0.8; } - -/** - * An animation that fades out one content area and fades in another - */ -.fade-in-out.ng-enter, .fade-in-out > .ng-enter { - opacity: 0; - -webkit-transition: opacity 0.3s ease-in-out; } -.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active { - opacity: 1; } -.fade-in-out.ng-leave, .fade-in-out > .ng-leave { - opacity: 1; - -webkit-transition: opacity 0.3s ease-in-out; } -.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active { - opacity: 0; } - -.slide-left-fade-add { - -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } - -.slide-left-fade-add-active { - -webkit-transform: translate3d(-100%, 0, 0); - opacity: 0; } - -.slide-in-left-fade-add { - -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; - -webkit-transform: translate3d(100%, 0, 0); - opacity: 0; } - -.slide-in-left-fade-add-active { - -webkit-transform: translate3d(0px, 0, 0); - opacity: 1; } - @-webkit-keyframes fadeOut { from { opacity: 1; } @@ -3957,6 +3899,79 @@ a.button { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } +/** + * Nav controllers and header bar animations + */ +.content-slide-in.ng-enter, .content-slide-in > .ng-enter { + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(100%, 0, 0); + box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } +.content-slide-in.ng-enter-active, .content-slide-in > .ng-enter-active { + -webkit-transform: translate3d(0, 0, 0); } +.content-slide-in.ng-leave, .content-slide-in > .ng-leave { + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(0%, 0, 0); } +.content-slide-in.ng-leave-active, .content-slide-in > .ng-leave-active { + -webkit-transform: translate3d(-10%, 0, 0); + opacity: 0.8; } + +.content-slide-out.ng-enter, .content-slide-out > .ng-enter { + z-index: 1; + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(-100%, 0, 0); + box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); } +.content-slide-out.ng-enter-active, .content-slide-out > .ng-enter-active { + -webkit-transform: translate3d(0, 0, 0); } +.content-slide-out.ng-leave, .content-slide-out > .ng-leave { + z-index: 0; + -webkit-transition: 0.5s ease-in-out all; + -webkit-transform: translate3d(0%, 0, 0); } +.content-slide-out.ng-leave-active, .content-slide-out > .ng-leave-active { + -webkit-transform: translate3d(10%, 0, 0); + opacity: 0.8; } + +.bar-title-in-add { + -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; + -webkit-transform: translate3d(100%, 0, 0); + opacity: 0; } + +.bar-title-in-add-active { + -webkit-transform: translate3d(0px, 0, 0); + opacity: 1; } + +.bar-title-out-add { + -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } + +.bar-title-out-add-active { + -webkit-transform: translate3d(-100%, 0, 0); + opacity: 0; } + +.bar-button-in { + opacity: 0; } + +.bar-button-in-add { + -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; + -webkit-transform: translate3d(50%, 0, 0); + opacity: 0; } + +.bar-button-in-active { + -webkit-transform: translate3d(0px, 0, 0); + opacity: 1; } + +/** + * Tab controller animations + */ +.fade-in-out.ng-enter, .fade-in-out > .ng-enter { + opacity: 0; + -webkit-transition: opacity 0.3s ease-in-out; } +.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active { + opacity: 1; } +.fade-in-out.ng-leave, .fade-in-out > .ng-leave { + opacity: 1; + -webkit-transition: opacity 0.3s ease-in-out; } +.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active { + opacity: 0; } + i.icon-default, .icon.icon-default { color: white; } @@ -4039,9 +4054,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .icon-loading:before { content: "\e144"; } @@ -4054,9 +4069,9 @@ i.icon-gray-lighter, .icon.icon-gray-lighter { line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - -webkit-animation: spin .75s linear infinite; - -moz-animation: spin .75s linear infinite; - animation: spin .75s linear infinite; } + -webkit-animation: spin 0.75s linear infinite; + -moz-animation: spin 0.75s linear infinite; + animation: spin 0.75s linear infinite; } .icon-refreshing:before { content: "\e144"; } diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 1abf9887fe..665275db71 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -643,15 +643,29 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) { + // We need to animate the new controller into view. var animatePushedController = function(childScope, clone, $element) { - var title = angular.element($element.parent().parent().parent()[0].querySelector('.title')); + var parent = angular.element($element.parent().parent().parent()); + + var title = angular.element(parent[0].querySelector('.title')); + + // Clone the old title and insert it so we can animate it back into place for the new controller var newTitle = angular.element(title.clone()); $compile(newTitle)(childScope); title.after(newTitle); - clone.addClass(childScope.slideAnimation); + // Grab the button so we can slide it in + var button = angular.element(parent[0].querySelector('.button')); + clone.addClass(childScope.slideInAnimation); + + // Slide the button in + $animate.addClass(button, childScope.slideButtonInAnimation, function() { + $animate.removeClass(button, childScope.slideButtonInAnimation, function() {}); + }) + + // Slide the new title in $animate.addClass(newTitle, childScope.slideTitleInAnimation, function() { $animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() { newTitle.scope().$destroy(); @@ -659,10 +673,11 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges }); }); + // Grab the old title and slide it out var title = $element.parent().parent().parent()[0].querySelector('.title'); $animate.enter(clone, $element.parent(), $element); - $animate.addClass(angular.element(title), childScope.slideTitleAnimation, function() { - $animate.removeClass(angular.element(title), childScope.slideTitleAnimation, function() { + $animate.addClass(angular.element(title), childScope.slideTitleOutAnimation, function() { + $animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() { }); }); }; @@ -677,9 +692,11 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges $scope.title = $attr.title; - $scope.slideAnimation = $attr.slideAnimation || ''; - $scope.slideTitleAnimation = $attr.slideTitleAnimation || ''; - $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || ''; + $scope.slideInAnimation = $attr.slideAnimation || 'content-slide-in'; + $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || 'bar-title-in'; + $scope.slideTitleOutAnimation = $attr.slideTitleOutAnimation || 'bar-title-out'; + $scope.slideButtonInAnimation = $attr.slideButtonInAnimation || 'bar-button-in'; + $scope.slideButtonOutAnimation = $attr.slideButtonOutAnimation || 'bar-button-out'; if($attr.navBar === "false") { navCtrl.hideNavBar(); diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js index 6a2526b0aa..7938e60a0a 100644 --- a/js/ext/angular/src/directive/ionicNav.js +++ b/js/ext/angular/src/directive/ionicNav.js @@ -98,15 +98,29 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) { + // We need to animate the new controller into view. var animatePushedController = function(childScope, clone, $element) { - var title = angular.element($element.parent().parent().parent()[0].querySelector('.title')); + var parent = angular.element($element.parent().parent().parent()); + + var title = angular.element(parent[0].querySelector('.title')); + + // Clone the old title and insert it so we can animate it back into place for the new controller var newTitle = angular.element(title.clone()); $compile(newTitle)(childScope); title.after(newTitle); - clone.addClass(childScope.slideAnimation); + // Grab the button so we can slide it in + var button = angular.element(parent[0].querySelector('.button')); + clone.addClass(childScope.slideInAnimation); + + // Slide the button in + $animate.addClass(button, childScope.slideButtonInAnimation, function() { + $animate.removeClass(button, childScope.slideButtonInAnimation, function() {}); + }) + + // Slide the new title in $animate.addClass(newTitle, childScope.slideTitleInAnimation, function() { $animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() { newTitle.scope().$destroy(); @@ -114,10 +128,11 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges }); }); + // Grab the old title and slide it out var title = $element.parent().parent().parent()[0].querySelector('.title'); $animate.enter(clone, $element.parent(), $element); - $animate.addClass(angular.element(title), childScope.slideTitleAnimation, function() { - $animate.removeClass(angular.element(title), childScope.slideTitleAnimation, function() { + $animate.addClass(angular.element(title), childScope.slideTitleOutAnimation, function() { + $animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() { }); }); }; @@ -132,9 +147,11 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges $scope.title = $attr.title; - $scope.slideAnimation = $attr.slideAnimation || ''; - $scope.slideTitleAnimation = $attr.slideTitleAnimation || ''; - $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || ''; + $scope.slideInAnimation = $attr.slideAnimation || 'content-slide-in'; + $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || 'bar-title-in'; + $scope.slideTitleOutAnimation = $attr.slideTitleOutAnimation || 'bar-title-out'; + $scope.slideButtonInAnimation = $attr.slideButtonInAnimation || 'bar-button-in'; + $scope.slideButtonOutAnimation = $attr.slideButtonOutAnimation || 'bar-button-out'; if($attr.navBar === "false") { navCtrl.hideNavBar(); diff --git a/js/ext/angular/test/nav.html b/js/ext/angular/test/nav.html index 8e14cc408e..23a933f219 100644 --- a/js/ext/angular/test/nav.html +++ b/js/ext/angular/test/nav.html @@ -39,7 +39,7 @@