javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Configurable nav controller anims

Browse Source
This commit is contained in:
Max Lynch
2013-10-31 22:16:29 -05:00
parent ea026b3e03
commit 7d0c075d82
7 changed files with 81 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
dist/css/ionic-ios7.css vendored
View File

@ -2289,12 +2289,12 @@ a.button {
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
.slide-left-fade-add-active { .slide-left-fade-add-active {
-webkit-transform: translate3d(-120px, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
opacity: 0; } opacity: 0; }
.slide-in-left-fade-add { .slide-in-left-fade-add {
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-webkit-transform: translate3d(120px, 0, 0); -webkit-transform: translate3d(100%, 0, 0);
opacity: 0; } opacity: 0; }
.slide-in-left-fade-add-active { .slide-in-left-fade-add-active {

4
dist/css/ionic-scoped.css vendored
View File

@ -3109,11 +3109,11 @@
.ionic .slide-left-fade-add { .ionic .slide-left-fade-add {
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
.ionic .slide-left-fade-add-active { .ionic .slide-left-fade-add-active {
-webkit-transform: translate3d(-120px, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
opacity: 0; } opacity: 0; }
.ionic .slide-in-left-fade-add { .ionic .slide-in-left-fade-add {
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-webkit-transform: translate3d(120px, 0, 0); -webkit-transform: translate3d(100%, 0, 0);
opacity: 0; } opacity: 0; }
.ionic .slide-in-left-fade-add-active { .ionic .slide-in-left-fade-add-active {
-webkit-transform: translate3d(0px, 0, 0); -webkit-transform: translate3d(0px, 0, 0);

4
dist/css/ionic.css vendored
View File

@ -3875,12 +3875,12 @@ a.button {
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; } -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
.slide-left-fade-add-active { .slide-left-fade-add-active {
-webkit-transform: translate3d(-120px, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
opacity: 0; } opacity: 0; }
.slide-in-left-fade-add { .slide-in-left-fade-add {
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-webkit-transform: translate3d(120px, 0, 0); -webkit-transform: translate3d(100%, 0, 0);
opacity: 0; } opacity: 0; }
.slide-in-left-fade-add-active { .slide-in-left-fade-add-active {

59
dist/js/ionic-angular.js vendored
View File

@ -593,21 +593,7 @@ 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 // 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 el = $compile(templateString)(childScope, function(cloned, scope) {
var content = $element[0].querySelector('.content'); var content = $element[0].querySelector('.content');
var title = $element.parent().parent().parent()[0].querySelector('.title');
var newTitle = angular.element(title.cloneNode());
$compile(newTitle)(childScope);
title.parentNode.insertBefore(newTitle[0], title.nextSibling);
console.log(newTitle);
$animate.enter(cloned, angular.element(content)); $animate.enter(cloned, angular.element(content));
$animate.addClass(angular.element(newTitle), 'slide-in-left-fade', function() {
$animate.removeClass(angular.element(newTitle), 'slide-in-left-fade', function() {
newTitle.scope().$destroy();
newTitle.remove();
});
});
}); });
}); });
}; };
@ -655,7 +641,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
}; };
}) })
.directive('navContent', ['Gesture', '$animate', function(Gesture, $animate) { .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
return { return {
restrict: 'ECA', restrict: 'ECA',
require: '^navs', require: '^navs',
@ -666,6 +652,8 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
var lastParent, lastIndex, childScope, childElement; var lastParent, lastIndex, childScope, childElement;
$scope.title = $attr.title; $scope.title = $attr.title;
$scope.slideAnimation = $attr.slideAnimation || '';
$scope.slideTitleAnimation = $attr.slideTitleAnimation || '';
if($attr.navBar === "false") { if($attr.navBar === "false") {
navCtrl.hideNavBar(); navCtrl.hideNavBar();
@ -675,20 +663,31 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
$scope.pushController($scope, $element); $scope.pushController($scope, $element);
var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
var newTitle = angular.element(title.clone());
$compile(newTitle)($scope);
title.after(newTitle);
console.log(newTitle);
$animate.addClass(newTitle, $scope.slideTitleAnimation, function() {
$animate.removeClass(newTitle, $scope.slideTitleAnimation, function() {
newTitle.scope().$destroy();
newTitle.remove();
});
});
$scope.$watch('isVisible', function(value) { $scope.$watch('isVisible', function(value) {
if(childElement) {
$animate.leave(childElement);
childElement = undefined;
}
if(childScope) {
childScope.$destroy();
childScope = undefined;
}
if(value) { if(value) {
childScope = $scope.$new(); childScope = $scope.$new();
transclude(childScope, function(clone) { transclude(childScope, function(clone) {
childElement = clone; childElement = clone;
clone.addClass($scope.slideAnimation);
/*
Gesture.on('drag', function(e) { Gesture.on('drag', function(e) {
//navCtrl.handleDrag(e); //navCtrl.handleDrag(e);
console.log('Content drag', e); console.log('Content drag', e);
@ -697,14 +696,24 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
Gesture.on('release', function(e) { Gesture.on('release', function(e) {
//navCtrl._endDrag(e); //navCtrl._endDrag(e);
}, childElement[0]); }, childElement[0]);
*/
var title = $element.parent().parent().parent()[0].querySelector('.title'); var title = $element.parent().parent().parent()[0].querySelector('.title');
$animate.enter(clone, $element.parent(), $element); $animate.enter(clone, $element.parent(), $element);
$animate.addClass(angular.element(title), 'slide-left-fade', function() { $animate.addClass(angular.element(title), $scope.slideTitleAnimation, function() {
$animate.removeClass(angular.element(title), 'slide-left-fade', function() { $animate.removeClass(angular.element(title), $scope.slideTitleAnimation, function() {
}); });
}); });
}); });
} else {
if(childElement) {
$animate.leave(childElement);
childElement = undefined;
}
if(childScope) {
childScope.$destroy();
childScope = undefined;
}
} }
}); });
} }

59
js/ext/angular/src/directive/ionicNav.js vendored
View File

@ -48,21 +48,7 @@ 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 // 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 el = $compile(templateString)(childScope, function(cloned, scope) {
var content = $element[0].querySelector('.content'); var content = $element[0].querySelector('.content');
var title = $element.parent().parent().parent()[0].querySelector('.title');
var newTitle = angular.element(title.cloneNode());
$compile(newTitle)(childScope);
title.parentNode.insertBefore(newTitle[0], title.nextSibling);
console.log(newTitle);
$animate.enter(cloned, angular.element(content)); $animate.enter(cloned, angular.element(content));
$animate.addClass(angular.element(newTitle), 'slide-in-left-fade', function() {
$animate.removeClass(angular.element(newTitle), 'slide-in-left-fade', function() {
newTitle.scope().$destroy();
newTitle.remove();
});
});
}); });
}); });
}; };
@ -110,7 +96,7 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
}; };
}) })
.directive('navContent', ['Gesture', '$animate', function(Gesture, $animate) { .directive('navContent', ['Gesture', '$animate', '$compile', function(Gesture, $animate, $compile) {
return { return {
restrict: 'ECA', restrict: 'ECA',
require: '^navs', require: '^navs',
@ -121,6 +107,8 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
var lastParent, lastIndex, childScope, childElement; var lastParent, lastIndex, childScope, childElement;
$scope.title = $attr.title; $scope.title = $attr.title;
$scope.slideAnimation = $attr.slideAnimation || '';
$scope.slideTitleAnimation = $attr.slideTitleAnimation || '';
if($attr.navBar === "false") { if($attr.navBar === "false") {
navCtrl.hideNavBar(); navCtrl.hideNavBar();
@ -130,20 +118,31 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
$scope.pushController($scope, $element); $scope.pushController($scope, $element);
var title = angular.element($element.parent().parent().parent()[0].querySelector('.title'));
var newTitle = angular.element(title.clone());
$compile(newTitle)($scope);
title.after(newTitle);
console.log(newTitle);
$animate.addClass(newTitle, $scope.slideTitleAnimation, function() {
$animate.removeClass(newTitle, $scope.slideTitleAnimation, function() {
newTitle.scope().$destroy();
newTitle.remove();
});
});
$scope.$watch('isVisible', function(value) { $scope.$watch('isVisible', function(value) {
if(childElement) {
$animate.leave(childElement);
childElement = undefined;
}
if(childScope) {
childScope.$destroy();
childScope = undefined;
}
if(value) { if(value) {
childScope = $scope.$new(); childScope = $scope.$new();
transclude(childScope, function(clone) { transclude(childScope, function(clone) {
childElement = clone; childElement = clone;
clone.addClass($scope.slideAnimation);
/*
Gesture.on('drag', function(e) { Gesture.on('drag', function(e) {
//navCtrl.handleDrag(e); //navCtrl.handleDrag(e);
console.log('Content drag', e); console.log('Content drag', e);
@ -152,14 +151,24 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
Gesture.on('release', function(e) { Gesture.on('release', function(e) {
//navCtrl._endDrag(e); //navCtrl._endDrag(e);
}, childElement[0]); }, childElement[0]);
*/
var title = $element.parent().parent().parent()[0].querySelector('.title'); var title = $element.parent().parent().parent()[0].querySelector('.title');
$animate.enter(clone, $element.parent(), $element); $animate.enter(clone, $element.parent(), $element);
$animate.addClass(angular.element(title), 'slide-left-fade', function() { $animate.addClass(angular.element(title), $scope.slideTitleAnimation, function() {
$animate.removeClass(angular.element(title), 'slide-left-fade', function() { $animate.removeClass(angular.element(title), $scope.slideTitleAnimation, function() {
}); });
}); });
}); });
} else {
if(childElement) {
$animate.leave(childElement);
childElement = undefined;
}
if(childScope) {
childScope.$destroy();
childScope = undefined;
}
} }
}); });
} }

10
js/ext/angular/test/nav.html
View File

@ -7,9 +7,9 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet"> <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="../../../../dist/css/ionic.css"> <link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="/vendor/angular/angular-1.2.0rc2.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script src="/vendor/angular/angular-touch.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-touch.js"></script>
<script src="/vendor/angular/angular-animate.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular-animate.js"></script>
<style> <style>
.view { .view {
position: fixed; position: fixed;
@ -34,12 +34,12 @@
<navs> <navs>
<nav-bar></nav-bar> <nav-bar></nav-bar>
<content has-header="true" ng-controller="AppCtrl" class="slide-in-slide-out"> <content has-header="true" ng-controller="AppCtrl">
</content> </content>
</navs> </navs>
<script id="page.html" type="text/ng-template"> <script id="page.html" type="text/ng-template">
<div title="Home" ng-controller="CatsCtrl" class="nav-content slide-in-slide-out"> <div title="Home" ng-controller="CatsCtrl" class="nav-content" slide-animation="slide-in-slide-out" slide-title-animation="slide-left-fade">
<h1></h1> <h1></h1>
<a href="#" class="button button-success" ng-click="goNext()">Next</a> <a href="#" class="button button-success" ng-click="goNext()">Next</a>
<list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list> <list><list-item ng-repeat="item in items" on-select="goNext()">Test</list-item></list>

4
scss/ionic/_animations.scss
View File

@ -92,7 +92,7 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
} }
.slide-left-fade-add-active { .slide-left-fade-add-active {
//margin-left: -80px; //margin-left: -80px;
-webkit-transform: translate3d(-120px, 0, 0); -webkit-transform: translate3d(-100%, 0, 0);
opacity: 0; opacity: 0;
} }
.slide-left-fade-remove { .slide-left-fade-remove {
@ -102,7 +102,7 @@ $bezier-function: cubic-bezier(.1, .7, .1, 1);
.slide-in-left-fade-add { .slide-in-left-fade-add {
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-webkit-transform: translate3d(120px, 0, 0); -webkit-transform: translate3d(100%, 0, 0);
opacity: 0; opacity: 0;
} }
.slide-in-left-fade-add-active { .slide-in-left-fade-add-active {