New slide up/down for different states

Gruntfile.js

@@ -84,7 +84,6 @@ module.exports = function(grunt) {
           'bower_components/moment/min/moment-with-locales.js',
           'bower_components/angular/angular.js',
           'bower_components/angular-ui-router/release/angular-ui-router.js',
-          'bower_components/angular-foundation/mm-foundation.js',
           'bower_components/angular-foundation/mm-foundation-tpls.js',
           'bower_components/angular-animate/angular-animate.js',
           'bower_components/angular-moment/angular-moment.js',

public/index.html

@@ -31,8 +31,15 @@
 
 
         <section 
-          ng-class="{'main': index.hasProfile, 'main-dark': mainDark, 'animation-left': index.slideLeft, 
-          'animation-right': index.slideRight}" 
+          class="animation-slide"
+          ng-class="{
+          'main': index.hasProfile, 
+          'main-dark': mainDark, 
+          'animation-left': index.slideLeft, 
+          'animation-right': index.slideRight,
+          'animation-up': index.slideUp,
+          'animation-down': index.slideDown
+          }" 
           ui-view="main"></section>
         <div ui-view="menu" ng-if="!index.noFocusedWallet && !$root.hideMenuBar"></div>
         <a class="close-menu" ng-click="index.closeMenu()"></a>

public/views/modals/txp-details.html

@@ -1,6 +1,6 @@
 <nav class="tab-bar">
   <section class="right-small">
-    <a ng-click="cancel()" class="p10 ng-animate-disabled">
+    <a ng-click="cancel()" class="p10">
       <span class="text-close" translate>Close</span>
     </a>
   </section>

src/css/mobile.css

@@ -561,17 +561,6 @@ a.pin-button:active {
   padding-bottom: 20px;
 }
 
-.modal.fade .modal-dialog,
-.modal.in .modal-dialog,
-.reveal-modal-bg,
-.reveal-modal-bg .fade .in,
-.reveal-modal,
-.reveal-modal .fade,
-.reveal-modal .fade .out,
-.reveal-modal .fade .in,
-.reveal-modal.fade.full.in,
-.reveal-modal.fade.full.out,
-.reveal-modal.fade.full,
 input[type="color"],
 input[type="date"],
 input[type="datetime-local"],
@@ -691,7 +680,7 @@ textarea:focus
   color: #B7C2CD;
 }
 
-.animation-left, .animation-right {
+.animation-slide {
   position: absolute;
   background: #fff;
   display: block;
@@ -704,52 +693,80 @@ textarea:focus
   transform: translate3d(0, 0, 0);
 }
 
-.animation-left.ng-enter, .animation-left.ng-leave,
-.animation-right.ng-enter, .animation-right.ng-leave {
-  -webkit-transition: all ease 300ms;
-  transition: all ease 300ms;
+.animation-slide.ng-enter, 
+.animation-slide.ng-leave {
+  -webkit-transition: 0.25s ease all;
+  transition: 0.25s ease all;
+}
+
+.animation-slide.ng-enter.ng-enter-active {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  visibility: visible;
+}
+
+.animation-slide.ng-leave {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+  visibility: hidden;
 }
 
 .animation-left.ng-enter {
   -webkit-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
-  -webkit-transition-delay: 0.01s;
-  transition-delay: 0.01s;
-  opacity: 0;
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+  visibility: hidden;
 }
 .animation-right.ng-enter {
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.01s;
-  transition-delay: 0.01s;
-  opacity: 0;
-}
-.animation-left.ng-enter.ng-enter-active,
-.animation-right.ng-enter.ng-enter-active {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  opacity: 1;
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+  visibility: hidden;
 }
 
-.animation-left.ng-leave,
-.animation-right.ng-leave {
-  -webkit-transform: translate3d(0, 0, 0);
-  transform: translate3d(0, 0, 0);
-  opacity: 0;
+.animation-up.ng-enter {
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
 }
+.animation-down.ng-enter {
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+}
+
 .animation-left.ng-leave.animation-left.ng-leave-active {
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.01s;
-  transition-delay: 0.01s;
-  opacity: 0;
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+  visibility: hidden;
 }
 .animation-right.ng-leave.animation-right.ng-leave-active {
   -webkit-transform: translate3d(100%, 0, 0);
   transform: translate3d(100%, 0, 0);
-  -webkit-transition-delay: 0.01s;
-  transition-delay: 0.01s;
-  opacity: 0;
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+  visibility: hidden;
+}
+
+.animation-up.ng-leave.animation-up.ng-leave-active {
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+  visibility: hidden;
+}
+.animation-down.ng-leave.animation-down.ng-leave-active {
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
+  visibility: hidden;
 }
 
 .tab-view {
@@ -773,6 +790,14 @@ textarea:focus
   transform: translate3d(-100%, 0, 0) !important;
 }
 
+.animated.slideInRight, 
+.animated.slideInLeft, 
+.animated.slideInUp, 
+.animated.slideInDown {
+  -webkit-animation-duration: 0.3s;
+  animation-duration: 0.3s;
+}
+
 /* removes 300ms in IE */
 -ms-touch-action: manipulation; /* IE10 /
 touch-action: manipulation; /* IE11+ */

src/js/controllers/index.js

@@ -653,7 +653,9 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     $timeout(function() {
       self.slideLeft = false;
       self.slideRight = false;
-    }, 370);
+      self.slideUp = false;
+      self.slideDown = false;
+    }, 400);
   });
 
   $rootScope.$on('Animation/SlideLeft', function(event) {
@@ -664,6 +666,13 @@ angular.module('copayApp.controllers').controller('indexController', function($r
     self.slideRight = true;
   });
 
+  $rootScope.$on('Animation/SlideUp', function(event) {
+    self.slideUp = true;
+  });
+
+  $rootScope.$on('Animation/SlideDown', function(event) {
+    self.slideDown = true;
+  });
 
   $rootScope.$on('NewIncomingTx', function() {
     self.updateBalance();

src/js/controllers/walletHome.js

@@ -277,9 +277,9 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
     };
 
     var modalInstance = $modal.open({
-      animation: false,
+      animation: true,
       templateUrl: 'views/modals/txp-details.html',
-      windowClass: 'full',
+      windowClass: 'full animated slideInUp',
       controller: ModalInstanceCtrl,
     });
 

src/js/routes.js

@@ -517,7 +517,7 @@ angular
       preferencesBwsUrl: 12,
       about: 12,
       logs: 13,
-      add: 0,
+      add: 11,
       create: 12,
       join: 12,
       import: 12,
@@ -530,10 +530,21 @@ angular
     });
 
     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
+
       if (pageWeight[fromState.name] > pageWeight[toState.name]) {
-        $rootScope.$emit('Animation/SlideRight');
+        if (pageWeight[fromState.name] == 11) {
+          $rootScope.$emit('Animation/SlideDown');
+        }
+        else {
+          $rootScope.$emit('Animation/SlideRight');
+        }
       } else if (pageWeight[fromState.name] < pageWeight[toState.name]) {
-        $rootScope.$emit('Animation/SlideLeft');
+        if (pageWeight[toState.name] < 12) {
+          $rootScope.$emit('Animation/SlideUp');
+        }
+        else {
+          $rootScope.$emit('Animation/SlideLeft');
+        }
       }
 
       if (!profileService.profile && toState.needProfile) {