diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index b23f88008b..1fb98ae8c1 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -884,9 +884,9 @@ a.subdued‎ { border-color: #c73927; color: white; } .tabs.tabs-dark { - background-color: #ef4e3a; - background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%); - border-color: #c73927; + background-color: #444444; + background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%); + border-color: #111111; color: white; } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { .tabs { diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index 9c8ea44d93..c7cfba0dad 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -1796,9 +1796,9 @@ border-color: #c73927; color: white; } .ionic .tabs.tabs-dark { - background-color: #ef4e3a; - background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%); - border-color: #c73927; + background-color: #444444; + background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%); + border-color: #111111; color: white; } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { .ionic .tabs { diff --git a/dist/css/ionic.css b/dist/css/ionic.css index 40360946bd..c5915ac985 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -2253,9 +2253,9 @@ a.subdued‎ { border-color: #c73927; color: white; } .tabs.tabs-dark { - background-color: #ef4e3a; - background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%); - border-color: #c73927; + background-color: #444444; + background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%); + border-color: #111111; color: white; } @media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) { .tabs { @@ -3943,78 +3943,77 @@ 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; } +@-webkit-keyframes slideInLeft { + 0% { + -webkit-transform: translate3d(100%, 0, 0); } -.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; } + 100% { + -webkit-transform: translate3d(0, 0, 0); } } -.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; } +@-webkit-keyframes slideOutLeft { + 0% { + -webkit-transform: translate3d(0px, 0, 0); } -.bar-title-in-add-active { - -webkit-transform: translate3d(0px, 0, 0); - opacity: 1; } + 100% { + -webkit-transform: translate3d(-100%, 0, 0); } } -.bar-title-out-add { - -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } +@-webkit-keyframes slideInRight { + 0% { + -webkit-transform: translate3d(-100%, 0, 0); } -.bar-title-out-add-active { - -webkit-transform: translate3d(-100%, 0, 0); - opacity: 0; } + 100% { + -webkit-transform: translate3d(0, 0, 0); } } -.bar-button-in { - opacity: 0; } +@-webkit-keyframes slideOutRight { + 0% { + -webkit-transform: translate3d(0%, 0, 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; } + 100% { + -webkit-transform: translate3d(100%, 0, 0); } } -.bar-button-in-active { - -webkit-transform: translate3d(0px, 0, 0); - opacity: 1; } +.slide-in-left.ng-enter, .slide-in-left > .ng-enter { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideInLeft; } +.slide-in-left.ng-leave, .slide-in-left > .ng-leave { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideOutLeft; } -/** - * 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; } +.slide-out-left.ng-enter, .slide-out-left > .ng-enter { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideOutLeft; } +.slide-out-left.ng-leave, .slide-out-left > .ng-leave { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideInLeft; } + +.slide-in-right.ng-enter, .slide-in-right > .ng-enter { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideInRight; } +.slide-in-right.ng-leave, .slide-in-right > .ng-leave { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideOutRight; } + +.slide-out-right.ng-enter, .slide-out-right > .ng-enter { + -webkit-animation-duration: 2250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideOutRight; } +.slide-out-right.ng-leave, .slide-out-right > .ng-leave { + -webkit-animation-duration: 2250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideInRight; } .ion-default { color: white; } diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 3c054ba8b5..c9ae6a73f4 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -702,6 +702,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges this.handleDrag = function(e) { + // TODO: Support dragging between pages }; this.endDrag = function(e) { @@ -720,7 +721,10 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges // Compile the template with the new scrope, and append it to the navigation's content area var el = $compile(templateString)(childScope, function(cloned, scope) { - var content = $element[0].querySelector('.content'); + var content = angular.element($element[0].querySelector('.content')); + + //content.append(cloned); + //angular.element(content).append(cloned); $animate.enter(cloned, angular.element(content)); }); }); @@ -759,12 +763,16 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges require: '^navs', replace: true, scope: true, - template: '
' + + template: '
' + 'Back' + '

{{navController.getTopController().title}}

' + '
', link: function(scope, element, attrs, navCtrl) { scope.navController = navCtrl; + + scope.barType = attrs.barType || 'bar-dark'; + element.addClass(scope.barType); + scope.$watch('navController.controllers.length', function(value) { }); scope.goBack = function() { @@ -777,42 +785,42 @@ 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 animatePushedController = function(childScope, clone, $element, isForward) { 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); - // Grab the button so we can slide it in var button = angular.element(parent[0].querySelector('.button')); - clone.addClass(childScope.slideInAnimation); + if(isForward) { - // Slide the button in - $animate.addClass(button, childScope.slideButtonInAnimation, function() { - $animate.removeClass(button, childScope.slideButtonInAnimation, function() {}); - }) + // 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(); - newTitle.remove(); + // Slide the new title in + $animate.addClass(newTitle, childScope.slideTitleInAnimation, function() { + $animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() { + newTitle.scope().$destroy(); + newTitle.remove(); + }); }); - }); - // 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.slideTitleOutAnimation, function() { - $animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() { + // Grab the old title and slide it out + var title = $element.parent().parent().parent()[0].querySelector('.title'); + $animate.addClass(angular.element(title), childScope.slideTitleOutAnimation, function() { + $animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() { + }); }); - }); + } else { + clone.addClass(childScope.slideBackInAnimation); + } }; return { @@ -823,9 +831,13 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges return function($scope, $element, $attr, navCtrl) { var lastParent, lastIndex, childScope, childElement; + // Store that we should go forwards on the animation. This toggles + // based on the visibility sequence (to support reverse transitions) + var wasVisible = null; $scope.title = $attr.title; - $scope.slideInAnimation = $attr.slideAnimation || 'content-slide-in'; + $scope.pushAnimation = $attr.pushAnimation || 'slide-in-left'; + $scope.popAnimation = $attr.popAnimation || 'slide-in-right'; $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || 'bar-title-in'; $scope.slideTitleOutAnimation = $attr.slideTitleOutAnimation || 'bar-title-out'; $scope.slideButtonInAnimation = $attr.slideButtonInAnimation || 'bar-button-in'; @@ -841,26 +853,47 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges $scope.pushController($scope, $element); $scope.$watch('isVisible', function(value) { - // Taken from ngIf - if(childElement) { - $animate.leave(childElement); - childElement = undefined; - } - if(childScope) { - childScope.$destroy(); - childScope = undefined; - } - // Check if this is visible, and if so, create it and show it if(value) { childScope = $scope.$new(); transclude(childScope, function(clone) { childElement = clone; - animatePushedController(childScope, clone, $element); + // Check if this is visible, and if so, create it and show it + if(wasVisible === false) { + clone.removeClass(childScope.pushAnimation); + clone.addClass(childScope.popAnimation); + } else { + clone.addClass(childScope.pushAnimation); + clone.removeClass(childScope.popAnimation); + } + + $animate.enter(clone, $element.parent(), $element); + wasVisible = true; }); - } + } else { + // Taken from ngIf + if(childElement) { + var clone = childElement; + // Check if this is visible, and if so, create it and show it + if(wasVisible === false) { + clone.removeClass(childScope.pushAnimation); + clone.addClass(childScope.popAnimation); + } else { + clone.addClass(childScope.pushAnimation); + clone.removeClass(childScope.popAnimation); + } + $animate.leave(childElement); + childElement = undefined; + wasVisible = false; + } + if(childScope) { + childScope.$destroy(); + childScope = undefined; + } + + } }); } } @@ -1126,7 +1159,9 @@ angular.module('ionic.ui.tabs', ['ngAnimate']) replace: true, scope: { animation: '@', - controllerChanged: '&' + controllerChanged: '&', + tabsType: '@', + tabsStyle: '@', }, transclude: true, controller: 'TabsCtrl', @@ -1195,9 +1230,13 @@ angular.module('ionic.ui.tabs', ['ngAnimate']) transclude: true, replace: true, scope: true, - template: '
' + + template: '
' + '' + - '
' + '
', + link: function($scope, $element, $attr) { + $element.addClass($scope.tabsType); + $element.addClass($scope.tabsStyle); + } }; }) @@ -1240,30 +1279,8 @@ angular.module('ionic.ui.tabs', ['ngAnimate']) template: '
' + '
' } -}) - -.directive('tabItem', function() { - return { - restrict: 'E', - replace: true, - scope: { - title: '@', - iconOn: '@', - iconOff: '@', - active: '=', - tabSelected: '@', - index: '=' - }, - link: function(scope, element, attrs) { - }, - template: - '' + - '' + - '' + - ' {{title}}' + - '' - }; }); + ; angular.module('ionic.ui.toggle', []) diff --git a/js/ext/angular/src/directive/ionicNav.js b/js/ext/angular/src/directive/ionicNav.js index bbc3266c07..128ff4cbba 100644 --- a/js/ext/angular/src/directive/ionicNav.js +++ b/js/ext/angular/src/directive/ionicNav.js @@ -38,6 +38,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges this.handleDrag = function(e) { + // TODO: Support dragging between pages }; this.endDrag = function(e) { @@ -56,7 +57,10 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges // Compile the template with the new scrope, and append it to the navigation's content area var el = $compile(templateString)(childScope, function(cloned, scope) { - var content = $element[0].querySelector('.content'); + var content = angular.element($element[0].querySelector('.content')); + + //content.append(cloned); + //angular.element(content).append(cloned); $animate.enter(cloned, angular.element(content)); }); }); @@ -95,12 +99,16 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges require: '^navs', replace: true, scope: true, - template: '
' + + template: '
' + 'Back' + '

{{navController.getTopController().title}}

' + '
', link: function(scope, element, attrs, navCtrl) { scope.navController = navCtrl; + + scope.barType = attrs.barType || 'bar-dark'; + element.addClass(scope.barType); + scope.$watch('navController.controllers.length', function(value) { }); scope.goBack = function() { @@ -113,42 +121,42 @@ 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 animatePushedController = function(childScope, clone, $element, isForward) { 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); - // Grab the button so we can slide it in var button = angular.element(parent[0].querySelector('.button')); - clone.addClass(childScope.slideInAnimation); + if(isForward) { - // Slide the button in - $animate.addClass(button, childScope.slideButtonInAnimation, function() { - $animate.removeClass(button, childScope.slideButtonInAnimation, function() {}); - }) + // 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(); - newTitle.remove(); + // Slide the new title in + $animate.addClass(newTitle, childScope.slideTitleInAnimation, function() { + $animate.removeClass(newTitle, childScope.slideTitleInAnimation, function() { + newTitle.scope().$destroy(); + newTitle.remove(); + }); }); - }); - // 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.slideTitleOutAnimation, function() { - $animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() { + // Grab the old title and slide it out + var title = $element.parent().parent().parent()[0].querySelector('.title'); + $animate.addClass(angular.element(title), childScope.slideTitleOutAnimation, function() { + $animate.removeClass(angular.element(title), childScope.slideTitleOutAnimation, function() { + }); }); - }); + } else { + clone.addClass(childScope.slideBackInAnimation); + } }; return { @@ -159,9 +167,13 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges return function($scope, $element, $attr, navCtrl) { var lastParent, lastIndex, childScope, childElement; + // Store that we should go forwards on the animation. This toggles + // based on the visibility sequence (to support reverse transitions) + var wasVisible = null; $scope.title = $attr.title; - $scope.slideInAnimation = $attr.slideAnimation || 'content-slide-in'; + $scope.pushAnimation = $attr.pushAnimation || 'slide-in-left'; + $scope.popAnimation = $attr.popAnimation || 'slide-in-right'; $scope.slideTitleInAnimation = $attr.slideTitleInAnimation || 'bar-title-in'; $scope.slideTitleOutAnimation = $attr.slideTitleOutAnimation || 'bar-title-out'; $scope.slideButtonInAnimation = $attr.slideButtonInAnimation || 'bar-button-in'; @@ -177,26 +189,47 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges $scope.pushController($scope, $element); $scope.$watch('isVisible', function(value) { - // Taken from ngIf - if(childElement) { - $animate.leave(childElement); - childElement = undefined; - } - if(childScope) { - childScope.$destroy(); - childScope = undefined; - } - // Check if this is visible, and if so, create it and show it if(value) { childScope = $scope.$new(); transclude(childScope, function(clone) { childElement = clone; - animatePushedController(childScope, clone, $element); + // Check if this is visible, and if so, create it and show it + if(wasVisible === false) { + clone.removeClass(childScope.pushAnimation); + clone.addClass(childScope.popAnimation); + } else { + clone.addClass(childScope.pushAnimation); + clone.removeClass(childScope.popAnimation); + } + + $animate.enter(clone, $element.parent(), $element); + wasVisible = true; }); - } + } else { + // Taken from ngIf + if(childElement) { + var clone = childElement; + // Check if this is visible, and if so, create it and show it + if(wasVisible === false) { + clone.removeClass(childScope.pushAnimation); + clone.addClass(childScope.popAnimation); + } else { + clone.addClass(childScope.pushAnimation); + clone.removeClass(childScope.popAnimation); + } + $animate.leave(childElement); + childElement = undefined; + wasVisible = false; + } + if(childScope) { + childScope.$destroy(); + childScope = undefined; + } + + } }); } } diff --git a/js/ext/angular/src/directive/ionicTabBar.js b/js/ext/angular/src/directive/ionicTabBar.js index a45c6a0614..d2d2510d27 100644 --- a/js/ext/angular/src/directive/ionicTabBar.js +++ b/js/ext/angular/src/directive/ionicTabBar.js @@ -48,7 +48,9 @@ angular.module('ionic.ui.tabs', ['ngAnimate']) replace: true, scope: { animation: '@', - controllerChanged: '&' + controllerChanged: '&', + tabsType: '@', + tabsStyle: '@', }, transclude: true, controller: 'TabsCtrl', @@ -117,9 +119,13 @@ angular.module('ionic.ui.tabs', ['ngAnimate']) transclude: true, replace: true, scope: true, - template: '
' + + template: '
' + '' + - '
' + '
', + link: function($scope, $element, $attr) { + $element.addClass($scope.tabsType); + $element.addClass($scope.tabsStyle); + } }; }) @@ -162,27 +168,5 @@ angular.module('ionic.ui.tabs', ['ngAnimate']) template: '
' + '
' } -}) - -.directive('tabItem', function() { - return { - restrict: 'E', - replace: true, - scope: { - title: '@', - iconOn: '@', - iconOff: '@', - active: '=', - tabSelected: '@', - index: '=' - }, - link: function(scope, element, attrs) { - }, - template: - '' + - '' + - '' + - ' {{title}}' + - '' - }; }); + diff --git a/js/ext/angular/test/list.html b/js/ext/angular/test/list.html index c0ebbb5432..28fbdda787 100644 --- a/js/ext/angular/test/list.html +++ b/js/ext/angular/test/list.html @@ -21,6 +21,7 @@ .my-repeat-animation > .ng-enter { left:-10px; opacity:0; + z-index: 10; } .my-repeat-animation > .ng-enter.ng-enter-active { left:0; diff --git a/js/ext/angular/test/tabs.html b/js/ext/angular/test/tabs.html index c35da23574..4c726eacb1 100644 --- a/js/ext/angular/test/tabs.html +++ b/js/ext/angular/test/tabs.html @@ -48,16 +48,16 @@ - + - +

Tasks

- + - +

Deadlines

@@ -83,7 +83,7 @@ - +

Settings

diff --git a/scss/ionic/_tabs.scss b/scss/ionic/_tabs.scss index 636e50a56e..5cdac8f61e 100644 --- a/scss/ionic/_tabs.scss +++ b/scss/ionic/_tabs.scss @@ -41,7 +41,7 @@ @include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white); } &.tabs-dark { - @include tab-style($tabs-danger-bg, $tabs-danger-border-color, $white); + @include tab-style($tabs-dark-bg, $tabs-dark-border-color, $white); } background-size: 0; diff --git a/scss/ionic/animations/__simple.scss b/scss/ionic/animations/__simple.scss new file mode 100644 index 0000000000..2614f89eee --- /dev/null +++ b/scss/ionic/animations/__simple.scss @@ -0,0 +1,96 @@ +// The animations in this file are "simple" - not too complex +// and pretty easy on performance. They can be overidden +// and enhanced easily. + +@-webkit-keyframes slideInLeft { + 0% { + -webkit-transform: translate3d(100%, 0, 0); + } + 100% { + -webkit-transform: translate3d(0,0,0); + } +} +@-webkit-keyframes slideOutLeft { + 0% { + -webkit-transform: translate3d(0px,0,0); + } + 100% { + -webkit-transform: translate3d(-100%,0,0); + } +} +@-webkit-keyframes slideInRight { + 0% { + -webkit-transform: translate3d(-100%,0,0); + } + 100% { + -webkit-transform: translate3d(0,0,0); + } +} +@-webkit-keyframes slideOutRight { + 0% { + -webkit-transform: translate3d(0%,0,0); + } + 100% { + -webkit-transform: translate3d(100%,0,0); + } +} + +.slide-in-left { + &.ng-enter, > .ng-enter { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideInLeft; + } + &.ng-leave, > .ng-leave { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideOutLeft; + } +} + +.slide-out-left { + &.ng-enter, > .ng-enter { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideOutLeft; + } + &.ng-leave, > .ng-leave { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideInLeft; + } +} + +.slide-in-right { + &.ng-enter, > .ng-enter { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideInRight; + } + &.ng-leave, > .ng-leave { + -webkit-animation-duration: 250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideOutRight; + } +} + +.slide-out-right { + &.ng-enter, > .ng-enter { + -webkit-animation-duration: 2250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideOutRight; + } + &.ng-leave, > .ng-leave { + -webkit-animation-duration: 2250ms; + -webkit-animation-fill-mode: both; + -webkit-animation-timing-function: ease-in-out; + -webkit-animation-name: slideInRight; + } +} diff --git a/scss/ionic/animations/_bar_ios7.scss b/scss/ionic/animations/_bar_ios7.scss index a36cb1edfb..c08c34a391 100644 --- a/scss/ionic/animations/_bar_ios7.scss +++ b/scss/ionic/animations/_bar_ios7.scss @@ -4,6 +4,7 @@ // A transition like the iOS nav controller where the old controller // slides out and the new one slides in. In this transition, the // old controller slides out more slowly than the new one slides in. +/* .content-slide-in { &.ng-enter, > .ng-enter { -webkit-transition: 0.5s ease-in-out all; @@ -22,6 +23,7 @@ opacity: 0.8; } } +*/ .content-slide-out { &.ng-enter, > .ng-enter { @@ -86,6 +88,7 @@ -webkit-transform: translate3d(0px, 0, 0); opacity: 1; } +*/ /** diff --git a/scss/ionic/ionic.scss b/scss/ionic/ionic.scss index 84a476baa4..2afb78408e 100644 --- a/scss/ionic/ionic.scss +++ b/scss/ionic/ionic.scss @@ -52,7 +52,7 @@ // Animations "animations", - "animations/bar_ios7", + "animations/_simple", // Util "icons",