mirror of https://github.com/BTCPrivate/copay.git
Fix animation to use hardware acceleration
This commit is contained in:
parent
8b7578ef25
commit
86ded3d30a
|
@ -615,36 +615,60 @@ a.pin-button:active {
|
||||||
padding-top: 1rem;
|
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-left.ng-enter, .animation-left.ng-leave,
|
||||||
.animation-right.ng-enter, .animation-right.ng-leave {
|
.animation-right.ng-enter, .animation-right.ng-leave {
|
||||||
-webkit-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: 270ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
|
-moz-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||||
-ms-transition: 270ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
|
-ms-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||||
-o-transition: 270ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
|
-o-transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||||
transition: 270ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
|
transition: all cubic-bezier(0.250, 0.460, 0.450, 0.940) 250ms;
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-left.ng-enter {
|
.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 {
|
.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-left.ng-enter.ng-enter-active,
|
||||||
.animation-right.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-left.ng-leave,
|
||||||
.animation-right.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 {
|
.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 {
|
.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() {
|
$timeout(function() {
|
||||||
self.swipeLeft = false;
|
self.swipeLeft = false;
|
||||||
self.swipeRight = false;
|
self.swipeRight = false;
|
||||||
}, 350);
|
}, 370);
|
||||||
});
|
});
|
||||||
|
|
||||||
$rootScope.$on('Animation/SwipeLeft', function(event) {
|
$rootScope.$on('Animation/SwipeLeft', function(event) {
|
||||||
|
|
|
@ -484,8 +484,11 @@ angular
|
||||||
importLegacy: 12
|
importLegacy: 12
|
||||||
};
|
};
|
||||||
|
|
||||||
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
|
$rootScope.$on('$stateChangeSuccess', function() {
|
||||||
$rootScope.$emit('Animation/Disable');
|
$rootScope.$emit('Animation/Disable');
|
||||||
|
});
|
||||||
|
|
||||||
|
$rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
|
||||||
|
|
||||||
if (pageWeight[fromState.name] > pageWeight[toState.name]) {
|
if (pageWeight[fromState.name] > pageWeight[toState.name]) {
|
||||||
$rootScope.$emit('Animation/SwipeRight');
|
$rootScope.$emit('Animation/SwipeRight');
|
||||||
|
|
Loading…
Reference in New Issue