javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +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

30
dist/css/ionic.css vendored
View File

@ -2911,6 +2911,36 @@ a.button {
* and pretty easy on performance. They can be overidden
* and enhanced easily.
*/
.slide-left-right > .ng-enter, .slide-left-right.ng-enter, .slide-left-right > .ng-leave, .slide-left-right.ng-leave {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms; }
.slide-left-right > .ng-enter, .slide-left-right.ng-enter {
-webkit-transform: translate3d(100%, 0, 0); }
.slide-left-right > .ng-enter.ng-enter-active, .slide-left-right.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0); }
.slide-left-right > .ng-leave.ng-leave-active, .slide-left-right.ng-leave.ng-leave-active {
-webkit-transform: translate3d(-100%, 0, 0); }
.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter, .slide-left-right-reverse > .ng-leave, .slide-left-right-reverse.ng-leave {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms; }
.slide-left-right-reverse > .ng-enter, .slide-left-right-reverse.ng-enter {
-webkit-transform: translate3d(-100%, 0, 0); }
.slide-left-right-reverse > .ng-enter.ng-enter-active, .slide-left-right-reverse.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0); }
.slide-left-right-reverse > .ng-leave.ng-leave-active, .slide-left-right-reverse.ng-leave.ng-leave-active {
-webkit-transform: translate3d(100%, 0, 0); }
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translate3d(100%, 0, 0); }

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

@ -25285,30 +25285,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);
$scope.isReverse = false;
var isFirst = true;
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);
@ -25318,6 +25313,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 {
@ -25329,6 +25330,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);
}
});

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);
$scope.isReverse = false;
var isFirst = true;
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>

42
scss/_animations.scss
View File

@ -7,6 +7,48 @@
* and enhanced easily.
*/
.slide-left-right {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
-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;
}
> .ng-enter, &.ng-enter {
-webkit-transform: translate3d(100%, 0, 0);
}
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
}
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
-webkit-transform: translate3d(-100%, 0, 0);
}
}
.slide-left-right-reverse {
> .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
-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;
}
> .ng-enter, &.ng-enter {
-webkit-transform: translate3d(-100%, 0, 0);
}
> .ng-enter.ng-enter-active, &.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
}
> .ng-leave.ng-leave-active, &.ng-leave.ng-leave-active {
-webkit-transform: translate3d(100%, 0, 0);
}
}
@-webkit-keyframes slideInLeft {
0% {
-webkit-transform: translate3d(100%, 0, 0);