mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #2504 from cmgustavo/feat/anim-hard-accelerated
Fix animation to use hardware acceleration
This commit is contained in:
commit
5958d60365
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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');
|
||||
|
|
Loading…
Reference in New Issue