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

Better animation naming and control system.

Browse Source
This commit is contained in:
Max Lynch
2013-11-01 18:33:13 -05:00
parent 40b5a83cb8
commit 01f689e58f
9 changed files with 270 additions and 310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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();

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

@ -39,7 +39,7 @@
</navs>
<script id="page.html" type="text/ng-template">
<div title="Home" ng-controller="CatsCtrl" class="nav-content" slide-animation="slide-in-slide-out" slide-title-animation="slide-left-fade" slide-title-in-animation="slide-in-left-fade">
<div title="Home" ng-controller="CatsCtrl" class="nav-content">
<h1></h1>
<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>