Fix animation to use hardware acceleration

This commit is contained in:
Gustavo Maximiliano Cortez 2015-04-11 12:53:29 -03:00
parent 8b7578ef25
commit 86ded3d30a
3 changed files with 41 additions and 14 deletions

View File

@ -615,36 +615,60 @@ a.pin-button:active {
padding-top: 1rem;
}
.animation { position: absolute; background: #fff; display: block; width: 100%; }
.animation {
position: absolute;
background: #fff;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.animation-left.ng-enter, .animation-left.ng-leave,
.animation-right.ng-enter, .animation-right.ng-leave {
-webkit-transition: 270ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 270ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 270ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 270ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 270ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-webkit-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
-moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
-ms-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
-o-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;
}
.animation-left.ng-enter {
left: 100%;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition-delay: 0.1s;
opacity: 0;
}
.animation-right.ng-enter {
left: -100%;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
-webkit-transition-delay: 0.1s;
opacity: 0;
}
.animation-left.ng-enter.ng-enter-active,
.animation-right.ng-enter.ng-enter-active {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 1;
}
.animation-left.ng-leave,
.animation-right.ng-leave {
left: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.animation-left.ng-leave.animation-left.ng-leave-active {
left: -100%;
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
opacity: 0;
}
.animation-right.ng-leave.animation-right.ng-leave-active {
left: 100%;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
opacity: 0;
}

View File

@ -433,7 +433,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r
$timeout(function() {
self.swipeLeft = false;
self.swipeRight = false;
}, 350);
}, 370);
});
$rootScope.$on('Animation/SwipeLeft', function(event) {

View File

@ -484,8 +484,11 @@ angular
importLegacy: 12
};
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
$rootScope.$on('$stateChangeSuccess', function() {
$rootScope.$emit('Animation/Disable');
});
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
if (pageWeight[fromState.name] > pageWeight[toState.name]) {
$rootScope.$emit('Animation/SwipeRight');