javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 22:44:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Better slide animation

Browse Source
This commit is contained in:
Max Lynch
2013-11-18 18:36:00 -06:00
parent 2ea66ecfb3
commit 78a16a9af1
5 changed files with 109 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
js/ext/angular/src/directive/ionicNavRouter.js vendored
View File

@@ -25,30 +25,25 @@ angular.module('ionic.ui.navRouter', [])
$rootScope.stackCursorPosition = 0;
}])
.directive('navRouter', ['$rootScope', '$location', '$window', '$route', function($rootScope, $location, $window, $route) {
.directive('navRouter', ['$rootScope', '$timeout', '$location', '$window', '$route', function($rootScope, $timeout, $location, $window, $route) {
return {
restrict: 'AC',
link: function($scope, $element, $attr) {
$scope.animation = $attr.animation;
$element.addClass($scope.animation);
var isFirst = true;
$scope.isReverse = false;
var reverseTransition = ionic.throttle(function() {
var reverseTransition = function() {
console.log('REVERSE');
$element.removeClass($scope.animation);
$element.addClass($scope.animation + '-reverse');
}, 1000, {
})
};
var forwardTransition = ionic.throttle(function() {
var forwardTransition = function() {
console.log('FORWARD');
$element.removeClass($scope.animation + '-reverse');
$element.addClass($scope.animation);
}, 1000, {
});
};
$scope.$on('$routeChangeSuccess', function(e, a) {
console.log('ROUTE CHANGED', a, e);
@@ -58,6 +53,12 @@ angular.module('ionic.ui.navRouter', [])
var back, historyState = $window.history.state;
back = !!(historyState && historyState.position <= $rootScope.stackCursorPosition);
if(isFirst) {
// Don't animate
//return;
}
if(back) {
reverseTransition();
} else {
@@ -69,6 +70,12 @@ angular.module('ionic.ui.navRouter', [])
// Store the new location
console.log('LOCATION CHANGE SUCCESS');
$rootScope.actualLocation = $location.path();
if(isFirst) {
isFirst = false;
$timeout(function() {
//reverseTransition();
}, 200);
}
});

55
js/ext/angular/test/navRouter.html
View File

@@ -9,62 +9,9 @@
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.js"></script>
<script src="../../../../dist/js/ionic-angular.js"></script>
<style>
.view-animate > .ng-enter, .view-animate > .ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
display:block;
width:100%;
border-left:1px solid black;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
padding:10px;
}
.view-animate > .ng-enter {
-webkit-transform: translate3d(100%, 0, 0);
}
.view-animate > .ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
}
.view-animate > .ng-leave.ng-leave-active {
-webkit-transform: translate3d(-100%, 0, 0);
}
.view-animate-reverse > .ng-enter, .view-animate-reverse > .ng-leave {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
display:block;
width:100%;
border-left:1px solid black;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
padding:10px;
}
.view-animate-reverse > .ng-enter {
-webkit-transform: translate3d(-100%, 0, 0);
}
.view-animate-reverse > .ng-enter.ng-enter-active {
-webkit-transform: translate3d(0%, 0, 0);
}
.view-animate-reverse > .ng-leave.ng-leave-active {
-webkit-transform: translate3d(100%, 0, 0);
}
</style>
</head>
<body>
<pane nav-router animation="view-animate">
<pane nav-router animation="slide-left-right">
<ng-view></ng-view>
</pane>