anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

Fix animation to use hardware acceleration

Browse source
This commit is contained in:
Gustavo Maximiliano Cortez 2015-04-11 12:53:29 -03:00
commit 86ded3d30a
3 changed files with 41 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/css/mobile.css
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;
}