mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 06:57:02 +08:00
Working on nav controller transitions, fixed #66
This commit is contained in:
Max Lynch
6
dist/css/ionic-ios7.css
vendored
6
dist/css/ionic-ios7.css
vendored
@ -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 {
|
||||
|
||||
6
dist/css/ionic-scoped.css
vendored
6
dist/css/ionic-scoped.css
vendored
@ -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 {
|
||||
|
||||
131
dist/css/ionic.css
vendored
131
dist/css/ionic.css
vendored
@ -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; }
|
||||
|
||||
139
dist/js/ionic-angular.js
vendored
139
dist/js/ionic-angular.js
vendored
@ -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: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
'<a href="#" ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1">Back</a>' +
|
||||
'<h1 class="title">{{navController.getTopController().title}}</h1>' +
|
||||
'</header>',
|
||||
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: '<div class="tabs tabs-icon-top tabs-primary">' +
|
||||
template: '<div class="tabs">' +
|
||||
'<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' +
|
||||
'</div>'
|
||||
'</div>',
|
||||
link: function($scope, $element, $attr) {
|
||||
$element.addClass($scope.tabsType);
|
||||
$element.addClass($scope.tabsStyle);
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
@ -1240,30 +1279,8 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
template: '<div class="tabs tabs-primary" ng-transclude>' +
|
||||
'</div>'
|
||||
}
|
||||
})
|
||||
|
||||
.directive('tabItem', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {
|
||||
title: '@',
|
||||
iconOn: '@',
|
||||
iconOff: '@',
|
||||
active: '=',
|
||||
tabSelected: '@',
|
||||
index: '='
|
||||
},
|
||||
link: function(scope, element, attrs) {
|
||||
},
|
||||
template:
|
||||
'<a href="#" ng-class="{active:active}" ng-click="tabSelected()" class="tab-item">' +
|
||||
'<i class="{{icon}}" ng-if="icon"></i>' +
|
||||
'<i class="{{iconOn}}" ng-if="active"></i>' +
|
||||
'<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
|
||||
'</a>'
|
||||
};
|
||||
});
|
||||
|
||||
;
|
||||
angular.module('ionic.ui.toggle', [])
|
||||
|
||||
|
||||
103
js/ext/angular/src/directive/ionicNav.js
vendored
103
js/ext/angular/src/directive/ionicNav.js
vendored
@ -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: '<header class="bar bar-header bar-dark nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
template: '<header class="bar bar-header nav-bar" ng-class="{hidden: !navController.navBar.isVisible}">' +
|
||||
'<a href="#" ng-click="goBack()" class="button" ng-if="navController.controllers.length > 1">Back</a>' +
|
||||
'<h1 class="title">{{navController.getTopController().title}}</h1>' +
|
||||
'</header>',
|
||||
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;
|
||||
}
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
36
js/ext/angular/src/directive/ionicTabBar.js
vendored
36
js/ext/angular/src/directive/ionicTabBar.js
vendored
@ -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: '<div class="tabs tabs-icon-top tabs-primary">' +
|
||||
template: '<div class="tabs">' +
|
||||
'<tab-controller-item title="{{controller.title}}" icon="{{controller.icon}}" icon-on="{{controller.iconOn}}" icon-off="{{controller.iconOff}}" active="controller.isVisible" index="$index" ng-repeat="controller in controllers"></tab-controller-item>' +
|
||||
'</div>'
|
||||
'</div>',
|
||||
link: function($scope, $element, $attr) {
|
||||
$element.addClass($scope.tabsType);
|
||||
$element.addClass($scope.tabsStyle);
|
||||
}
|
||||
};
|
||||
})
|
||||
|
||||
@ -162,27 +168,5 @@ angular.module('ionic.ui.tabs', ['ngAnimate'])
|
||||
template: '<div class="tabs tabs-primary" ng-transclude>' +
|
||||
'</div>'
|
||||
}
|
||||
})
|
||||
|
||||
.directive('tabItem', function() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
replace: true,
|
||||
scope: {
|
||||
title: '@',
|
||||
iconOn: '@',
|
||||
iconOff: '@',
|
||||
active: '=',
|
||||
tabSelected: '@',
|
||||
index: '='
|
||||
},
|
||||
link: function(scope, element, attrs) {
|
||||
},
|
||||
template:
|
||||
'<a href="#" ng-class="{active:active}" ng-click="tabSelected()" class="tab-item">' +
|
||||
'<i class="{{icon}}" ng-if="icon"></i>' +
|
||||
'<i class="{{iconOn}}" ng-if="active"></i>' +
|
||||
'<i class="{{iconOff}}" ng-if="!active"></i> {{title}}' +
|
||||
'</a>'
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -48,16 +48,16 @@
|
||||
</style>
|
||||
</head>
|
||||
<body ng-controller="RootCtrl">
|
||||
<tabs animation="fade-in-out" controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
|
||||
<tabs animation="fade-in-out" tabs-type="tabs-icon-only" tabs-style="tabs-primary" controller-changed="onControllerChanged(oldController, oldIndex, newController, newIndex)">
|
||||
|
||||
<tab title="Home" icon-on="icon-ios7-filing" icon-off="icon-ios7-filing-outline" ng-controller="HomeCtrl">
|
||||
<tab title="Home" icon-on="ion ion-ios7-filing" icon-off="ion ion-ios7-filing-outline" ng-controller="HomeCtrl">
|
||||
<header class="bar bar-header bar-secondary">
|
||||
<button class="button button-clear button-primary" ng-click="newTask()">New</button>
|
||||
<h1 class="title">Tasks</h1>
|
||||
<button class="button button-clear button-primary" ng-click="isEditingItems = !isEditingItems">Edit</button>
|
||||
</header>
|
||||
<content has-header="true" has-tabs="true">
|
||||
<list is-editing="isEditingItems" animation="fade-out" delete-icon="icon-minus-circled" reorder-icon="icon-navicon">
|
||||
<list is-editing="isEditingItems" animation="fade-out" delete-icon="ion ion-minus-circled" reorder-icon="ion-navicon">
|
||||
<list-item ng-repeat="item in items"
|
||||
item="item"
|
||||
buttons="item.buttons"
|
||||
@ -74,7 +74,7 @@
|
||||
</content>
|
||||
</tab>
|
||||
|
||||
<tab title="About" icon-on="icon-ios7-clock" icon-off="icon-ios7-clock-outline">
|
||||
<tab title="About" icon-on="ion ion-ios7-clock" icon-off="ion ion-ios7-clock-outline">
|
||||
<header class="bar bar-header bar-secondary">
|
||||
<h1 class="title">Deadlines</h1>
|
||||
</header>
|
||||
@ -83,7 +83,7 @@
|
||||
</content>
|
||||
</tab>
|
||||
|
||||
<tab title="Settings" icon-on="icon-ios7-gear" icon-off="icon-ios7-gear-outline">
|
||||
<tab title="Settings" icon-on="ion ion-ios7-gear" icon-off="ion ion-ios7-gear-outline">
|
||||
<header class="bar bar-header bar-secondary">
|
||||
<h1 class="title">Settings</h1>
|
||||
</header>
|
||||
|
||||
@ -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;
|
||||
|
||||
96
scss/ionic/animations/__simple.scss
Normal file
96
scss/ionic/animations/__simple.scss
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
|
||||
@ -52,7 +52,7 @@
|
||||
// Animations
|
||||
"animations",
|
||||
|
||||
"animations/bar_ios7",
|
||||
"animations/_simple",
|
||||
|
||||
// Util
|
||||
"icons",
|
||||
|
||||
Reference in New Issue
Block a user