From 86ded3d30a8aa84680fe5c513ab9c0b14e478806 Mon Sep 17 00:00:00 2001
From: Gustavo Maximiliano Cortez <cmgustavo83@gmail.com>
Date: Sat, 11 Apr 2015 12:53:29 -0300
Subject: [PATCH] Fix animation to use hardware acceleration

---
 src/css/mobile.css          | 48 +++++++++++++++++++++++++++----------
 src/js/controllers/index.js |  2 +-
 src/js/routes.js            |  5 +++-
 3 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/src/css/mobile.css b/src/css/mobile.css
index 6208089cf..7010ab210 100644
--- a/src/css/mobile.css
+++ b/src/css/mobile.css
@@ -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;
 }
 
diff --git a/src/js/controllers/index.js b/src/js/controllers/index.js
index a570c1b46..770dd1df0 100644
--- a/src/js/controllers/index.js
+++ b/src/js/controllers/index.js
@@ -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) {
diff --git a/src/js/routes.js b/src/js/routes.js
index 510334a03..844da9c3a 100644
--- a/src/js/routes.js
+++ b/src/js/routes.js
@@ -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');