anim at routes

public/views/add.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Add Wallet'; closeToHome = true; noColor = true">
+</div>
+
+
+
 <div class="content">
 <ul class="no-bullet manage size-12">
 	<li>

public/views/copayers.html

@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Copayers'">
+</div>
+
 <div class="content p20v" ng-controller="copayersController as copayers" ng-init="copayers.init()">
   <div ng-show="!index.notAuthorized">
     <div class="row m10t text-center">

public/views/create.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Create new wallet';  goBackToState = 'add'; noColor = true">
+</div>
+
+
+
 <div class="content p20v" ng-controller="createController as create">
 
   <div class="onGoingProcess" ng-show="create.loading">

public/views/import.html

@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Import wallet';  goBackToState = 'add'; noColor = true">
+</div>
+
 <div class="content p20v" ng-controller="importController as import">
   <div class="onGoingProcess" ng-show="import.loading">
     <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">

public/views/importLegacy.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Import legacy wallet'; goBackToState = 'add'; noColor = true">
+</div>
+
+
+
 <div class="content p20v" ng-controller="importLegacyController as importLegacy">
   <div class="row m20t">
     <div class="large-5 large-centered medium-7 medium-centered columns">

public/views/join.html

@@ -1,3 +1,10 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Join shared wallet'; goBackToState = 'add'; noColor = true">
+</div>
+
+
 <div class="content p20v" ng-controller="joinController as join">
   <div class="onGoingProcess" ng-show="join.loading">
     <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">

public/views/paymentUri.html

@@ -1,3 +1,9 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Choose wallet'; closeToHome = true">
+</div>
+
 <div class="content p20v row payment-uri" ng-controller="paymentUriController as payment">
   <div class="large-12 columns" ng-init="uri = payment.checkBitcoinUri()">
     <div class="panel text-center" ng-show="!uri">

public/views/preferencesAltCurrency.html

@@ -1,7 +1,7 @@
 <div 
   class="topbar-container" 
   ng-include="'views/includes/topbar.html'"
-  ng-init="titleSection='Alternative Currency'; goBackToState = 'preferences'">
+  ng-init="titleSection='Alternative Currency'; goBackToState = 'preferences'; noColor = true">
 </div>
 
 

public/views/preferencesBwsUrl.html

@@ -1,7 +1,7 @@
 <div 
   class="topbar-container" 
   ng-include="'views/includes/topbar.html'"
-  ng-init="titleSection='Bitcore Wallet Service'; goBackToState = 'preferences'">
+  ng-init="titleSection='Bitcore Wallet Service'; goBackToState = 'preferences'; noColor = true">
 </div>
 
 

public/views/preferencesLanguage.html

@@ -1,3 +1,11 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Language'; goBackToState = 'preferences'; noColor = true">
+</div>
+
+
+
 <div class="content preferences" ng-controller="preferencesLanguageController as prefLang">
   <div class="animated infinite flash text-center m20t text-gray" ng-show="prefLang.loading" translate>Applying changes</div>
   <div ng-show="!prefLang.loading"

public/views/preferencesUnit.html

@@ -1,3 +1,12 @@
+<div 
+  class="topbar-container" 
+  ng-include="'views/includes/topbar.html'"
+  ng-init="titleSection='Unit'; goBackToState = 'preferences'; noColor = true">
+</div>
+
+
+
+
 <div class="content preferences" ng-controller="preferencesUnitController as prefUnit">
   <div ng-repeat="unit in prefUnit.unitOpts" ng-click="prefUnit.save(unit)" class="line-b p20 size-14">
     <span>{{unit.shortName}}</span>

src/css/mobile.css

@@ -406,141 +406,34 @@ to prevent collapsing during animation*/
   right: 0;
 
   animation-timing-function: ease-in-out;
-  animation-duration: 0.4s;
+  animation-duration: .4s;
   animation-iteration-count: 1;
   animation-fill-mode: both;
   
   -webkit-animation-timing-function: ease-in-out;
-  -webkit-animation-duration: 0.4s;
+  -webkit-animation-duration: .4s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-fill-mode: both;
 }
 
-@-webkit-keyframes CslideInUp {
-  0% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
-@keyframes CslideInUp {
-  0% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-
 .CslideInUp {
-  -webkit-animation-name: CslideInUp;
+  -webkit-animation-name: slideInUp;
-  animation-name: CslideInUp;
+  animation-name: slideInUp;
   z-index: 1003;
 }
-
-@-webkit-keyframes CslideOutDown {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
-@keyframes CslideOutDown {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(0, 100%, 0);
-    transform: translate3d(0, 100%, 0);
-  }
-}
-
 .CslideOutDown {
-  -webkit-animation-name: CslideOutDown;
+  -webkit-animation-name: slideOutDown;
-  animation-name: CslideOutDown;
+  animation-name: slideOutDown;
   z-index: 1003;
 }
-
+.CslideOutRight {
-@-webkit-keyframes CslideInLeft {
+  -webkit-animation-name: slideOutRight;
-  0% {
+  animation-name: slideOutRight;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(100%, 0, 0);
-    transform: translate3d(100%, 0, 0);
-  }
-}
-
-@keyframes CslideInLeft {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(100%,0, 0);
-    transform: translate3d(100%,0, 0);
-  }
-}
-
-.CslideInLeft {
-  -webkit-animation-name: CslideInLeft;
-  animation-name: CslideInLeft;
   z-index: 1003;
 }
-
-@-webkit-keyframes CslideInRight {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(-100%,0, 0);
-    transform: translate3d(-100%,0, 0);
-  }
-}
-
-@keyframes CslideInRight {
-  0% {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-    visibility: visible;
-  }
-
-  100% {
-    -webkit-transform: translate3d(-100%, 0,0);
-    transform: translate3d(-100%, 0,0);
-  }
-}
-
 .CslideInRight {
-  -webkit-animation-name: CslideInRight;
+  -webkit-animation-name: slideInRight;
-  animation-name: CslideInRight;
+  animation-name: slideInRight;
   z-index: 1003;
 }
 
@@ -827,14 +720,6 @@ textarea:focus
   transform: translate3d(-100%, 0, 0) !important;
 }
 
-.animated.slideInRight, 
-.animated.slideInLeft, 
-.animated.CslideInUp, 
-.animated.CslideOutDown {
-  -webkit-animation-duration: 0.3s;
-  animation-duration: 0.3s;
-}
-
 /* removes 300ms in IE */
 -ms-touch-action: manipulation; /* IE10 /
 touch-action: manipulation; /* IE11+ */

src/js/routes.js

@@ -112,13 +112,6 @@ angular
           'main': {
             templateUrl: 'views/paymentUri.html',
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope) {
-              $scope.goBackToState = 'walletHome';
-              $scope.noColor = true;
-            }
-          }
         },
         needProfile: true
       })
@@ -134,14 +127,6 @@ angular
           'main': {
             templateUrl: 'views/join.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Join shared wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('import', {
@@ -151,14 +136,6 @@ angular
           'main': {
             templateUrl: 'views/import.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Import wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('importProfile', {
@@ -173,14 +150,6 @@ angular
           'main': {
             templateUrl: 'views/importLegacy.html',
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Import legacy wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
 
       })
@@ -192,14 +161,6 @@ angular
           'main': {
             templateUrl: 'views/create.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Create new wallet');
-              $scope.goBackToState = 'add';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('copayers', {
@@ -209,9 +170,6 @@ angular
           'main': {
             templateUrl: 'views/copayers.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html'
-          }
         }
       })
       .state('preferences', {
@@ -233,14 +191,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesLanguage.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Language');
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('preferencesUnit', {
@@ -252,14 +202,6 @@ angular
           'main': {
             templateUrl: 'views/preferencesUnit.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Unit');
-              $scope.goBackToState = 'preferences';
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('preferencesAdvanced', {
@@ -372,14 +314,6 @@ angular
           'main': {
             templateUrl: 'views/add.html'
           },
-          'topbar': {
-            templateUrl: 'views/includes/topbar.html',
-            controller: function($scope, gettext) {
-              $scope.titleSection = gettext('Add wallet');
-              $scope.closeToHome = true;
-              $scope.noColor = true;
-            }
-          }
         }
       })
       .state('cordova', {
@@ -478,14 +412,16 @@ angular
       }
 
       function animateTransition(entering, leaving) {
-        console.log('[routes.js.540:entering:]', entering, leaving); //TODO
+        // Animation in progress?
-        var e = document.getElementById('mainSection');
+        var x = document.getElementById('mainSectionDup');
-        if (entering) {
+        if (x) {
-          e.className = entering;
+          console.log('Anim in progress');
-        } else {
+          return;
-          e.className = '';
         }
 
+ //       console.log('[routes.js.540:entering:]', entering, leaving); //TODO
+        var e = document.getElementById('mainSection');
+
         var e2 = e.cloneNode(true);
         if (leaving)
           e2.className=  leaving;
@@ -496,21 +432,33 @@ angular
         e2.id = 'mainSectionDup';
         c.appendChild(e2);
 
-        // TODO  webkitTransitionEnd
+        if (entering) {
-//el.addEventListener("transitionend", updateTransition, true);
+          e.className = entering;
-        setTimeout(function(){
+        } else {
-console.log('[routes.js.556] DELETING OLD'); //TODO
+          e.className = '';
+        }
+
+        var cleanedUp = false;
+        var cleanUp = function() {
+          if (cleanedUp) return;
+          cleanedUp=true;
           e2.parentNode.removeChild(e2);
           e2.innerHTML = "";
-        }, 400);
+          e.className = '';
+        };
+        e.addEventListener("animationend", cleanUp, true);
+        e2.addEventListener("animationend", cleanUp, true);
+        e.addEventListener("webkitAnimationEnd", cleanUp, true);
+        e2.addEventListener("webkitAnimationEnd", cleanUp, true);
+        setTimeout(cleanUp, 500);
       }
 
-      console.log('[routes.js.540] =>', fromState.name, toState.name); //TODO
+//      console.log('[routes.js.540] =>', fromState.name, toState.name); //TODO
       if (pageWeight[fromState.name] && pageWeight[toState.name]) {
          if (pageWeight[fromState.name] > pageWeight[toState.name]) {
-          animateTransition(null, 'CslideInLeft');
+          animateTransition(null,'CslideOutRight', event);
          } else {
-          animateTransition(null, 'CslideInRight');
+          animateTransition('CslideInRight', null, event);
          }
       } else if (fromState.name) {
         if (pageWeight[toState.name]) {