Merge pull request #2663 from cmgustavo/feat/slide

Modals animation (slide up/down)

Gruntfile.js

@@ -84,9 +84,7 @@ 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',
           'bower_components/ng-lodash/build/ng-lodash.js',
           'bower_components/angular-qrcode/qrcode.js',
@@ -126,22 +124,6 @@ module.exports = function(grunt) {
         dest: 'public/css/foundation.css',
       }
     },
-    cssmin: {
-      copay: {
-        files: {
-          'public/css/copay.css': ['src/css/*.css'],
-        }
-      },
-      foundation: {
-        files: {
-          'public/css/foundation.css': [
-            'bower_components/angular/angular-csp.css',
-            'bower_components/foundation/css/foundation.css',
-            'bower_components/animate.css/animate.css'
-          ]
-        }
-      }
-    },
     uglify: {
       options: {
         mangle: false
@@ -209,7 +191,6 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-copy');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-uglify');
-  grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-angular-gettext');
   grunt.loadNpmTasks('grunt-markdown');
   grunt.loadNpmTasks('grunt-release');

bower.json

@@ -9,7 +9,6 @@
   "dependencies": {
     "angular": "~1.3.13",
     "angular-foundation": "*",
-    "angular-animate": "~1.3.13",
     "angular-qrcode": "~5.1.0",
     "angular-gettext": "~2.0.5",
     "animate.css": "~3.2.0",

package.json

@@ -29,7 +29,6 @@
     "grunt-cli": "^0.1.13",
     "grunt-contrib-concat": "^0.5.1",
     "grunt-contrib-copy": "^0.8.0",
-    "grunt-contrib-cssmin": "^0.12.2",
     "grunt-contrib-uglify": "^0.8.0",
     "grunt-contrib-watch": "^0.5.3",
     "grunt-exec": "^0.4.6",

public/index.html

@@ -31,8 +31,15 @@
 
 
         <section 
-          ng-class="{'main': index.hasProfile, 'main-dark': mainDark, 'animation-left': index.swipeLeft, 
+          class="animation-slide"
-          'animation-right': index.swipeRight}" 
+          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/importLegacy.html

@@ -31,7 +31,7 @@
           <label for="username">
             {{importLegacy.fromCloud ? 'Email': 'Username'}}
             <input type="text" class="form-control" placeholder="{{importLegacy.fromCloud ? 'Email': 'Username'}}"
-            name="username" ng-model="importLegacy.username" required>
+            name="username" ng-model="importLegacy.username" autocapitalize="off" required>
           </label>
 
           <label for="password">

public/views/includes/topbar.html

@@ -1,9 +1,9 @@
 <nav ng-controller="topbarController as topbar" class="tab-bar">
   <section class="left-small">
-    <a id="hamburger" class="p10 ng-animate-disabled" ng-show="!goBackToState && !closeToHome  && !index.noFocusedWallet"
+    <a id="hamburger" class="p10" ng-show="!goBackToState && !closeToHome  && !index.noFocusedWallet"
       ng-click="index.openMenu()"><i class="fi-list size-24"></i>
     </a>
-    <a ng-show="goBackToState" class="ng-animate-disabled"
+    <a ng-show="goBackToState"
       ng-click="$root.go(goBackToState); goBackToState = null"><i class="icon-arrow-left3 icon-back"></i>
       <span class="text-back">{{'Back'|translate}}</span>
     </a>
@@ -12,7 +12,7 @@
   <section class="right-small" ng-show="!goBackToState">
     <a id="camera-icon" ng-show="!closeToHome && index.isComplete" class="p10"
       ng-click="topbar.openScanner()"><i class="icon-scan size-21"></i></a>
-    <a ng-show="closeToHome" class="p10 ng-animate-disabled"
+    <a ng-show="closeToHome" class="p10"
       ng-click="topbar.goHome(); closeToHome = null">
       <span class="text-close">{{'Close'|translate}}</span>
     </a>

public/views/includes/transaction.html

@@ -1,6 +1,6 @@
 <div class="ng-animate-disabled row collapse last-transactions-content line-b"
   ng-class="{'text-gray':!tx.pendingForUs}"
-  ng-click="openTxModal(tx, index.copayers)">
+  ng-click="home.openTxpModal(tx, index.copayers)">
   <div class="small-1 columns text-center" >
     <i class="icon-circle-active size-10" ng-show="tx.pendingForUs" ng-style="{'color':index.backgroundColor}" style="margin-top:8px;"></i>
     &nbsp;

public/views/modals/copayers.html

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

public/views/modals/paypro.html

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

public/views/modals/scanner.html

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

public/views/modals/tx-details.html

@@ -1,6 +1,6 @@
 <nav class="tab-bar">
-  <section class="right-small">
+  <section class="left-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>
@@ -23,7 +23,7 @@
 
   <h4 class="title m0" translate>Information</h4>
   <ul class="no-bullet size-14 m0">
-    <li ng-if="btx.addressTo" class="line-b p10 oh" ng-click="copyAddress(btx.addressTo)">
+    <li ng-if="btx.addressTo && btx.addressTo != 'N/A'" class="line-b p10 oh" ng-click="copyAddress(btx.addressTo)">
     <span class="text-gray" translate>To</span>:
     <span class="right">
       <span ng-if="btx.merchant">
@@ -35,7 +35,7 @@
       </span>
     </span>
     </li>
-    <li ng-if="btx.time" class="line-b p10">
+    <li ng-if="btx.time" class="line-b p10 oh">
     <span class="text-gray" translate>Date</span>:
     <span class="right">
       <time>{{ btx.time * 1000 | amCalendar}}</time>
@@ -53,7 +53,7 @@
       {{btx.merchant.pr.pd.memo}}
     </span>
     </li>
-    <li ng-if="btx.time" class="line-b p10">
+    <li ng-if="btx.time" class="line-b p10 oh">
     <span class="text-gray" translate>Confirmations</span>:
     <span class="right" >
       <span class="text-warning" ng-show="!btx.confirmations || btx.confirmations == 0" translate>

public/views/modals/txp-details.html

@@ -1,6 +1,6 @@
 <nav class="tab-bar">
-  <section class="right-small">
+  <section class="left-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>

public/views/walletHome.html

@@ -33,6 +33,7 @@
         index.onGoingProcessName == 'openingWallet'
         || index.onGoingProcessName == 'updatingStatus'
         || index.onGoingProcessName == 'updatingBalance'
+        || index.onGoingProcessName == 'updatingPendingTxps'
         "> Updating Wallet... </span>
       <span translate ng-show="index.onGoingProcessName == 'scanning'">Scanning Wallet funds...</span>
       <span translate ng-show="index.onGoingProcessName == 'recreating'">Recreating Wallet...</span>
@@ -54,7 +55,13 @@
 
   <div class="oh" ng-show="!index.noFocusedWallet">
 
-<div id="walletHome" class="walletHome tab-view tab-in">
+    <!--
+
+    WalletHome
+
+    -->
+
+    <div id="walletHome" class="walletHome tab-view tab-in">
       <div class="oh">
         <div class="amount" ng-style="{'background-color':index.backgroundColor}">
           <div ng-if="!index.anyOnGoingProcess && !index.notAuthorized">
@@ -149,14 +156,15 @@
           </div>
         </div>
       </div>
-</div>
+      <div class="extra-margin-bottom"></div>
+    </div> <!-- END WalletHome -->
 
-<!--
+    <!--
 
     receive
 
--->
+    -->
-<div id="receive" class="receive tab-view">
+    <div id="receive" class="receive tab-view">
 
       <div ng-show="index.needsBackup && !home.skipBackup" class="p60t row text-center">
         <div class="text-warning text-bold m15b">
@@ -205,7 +213,7 @@
                   <h4 ng-class="{'enable_text_select': !index.isCordova}" class="size-12">
                     {{home.generatingAddress ? '...' : home.addr}}
 
-</h4>
+                  </h4>
                 </div>
               </div>
             </div>
@@ -231,16 +239,16 @@
           </div>
         </div>
       </div>
-
+      <div class="extra-margin-bottom"></div>
-</div>
+    </div> <!-- END Receive -->
 
 
-<!--
+    <!--
 
     send
 
     -->
-<div id="send" class="send tab-view">
+    <div id="send" class="send tab-view">
       <div ng-show="index.lockedBalance">
         <h4 class="title m0">
           <div class="left">
@@ -345,7 +353,7 @@
                 </label>
                 <div class="input">
                   <textarea id="comment" ng-disabled="home.blockUx" name="comment"
-                  ng-maxlength="100" ng-model="_comment" ng-focus="home.formFocus('msg')"
+                    ng-maxlength="500" ng-model="_comment" ng-focus="home.formFocus('msg')"
                     ng-blur="home.formFocus(false)"></textarea>
                 </div>
               </div>
@@ -366,15 +374,15 @@
           </form>
         </div>
       </div>
-  <!--  end of row -->
+      <div class="extra-margin-bottom"></div>
-</div>
+    </div> <!-- END Send -->
 
-<!--
+    <!--
 
-history
+    history
 
--->
+    -->
-<div id="history" class="history tab-view">
+    <div id="history" class="history tab-view">
       <div class="row m20t" ng-show="!index.txHistory[0] && !index.updatingTxHistory">
         <div class="large-12 columns">
           <div class="oh text-center">
@@ -385,7 +393,6 @@ history
             <span ng-if="!index.txHistoryError" translate>
               No transactions yet
             </span>
-        </span>
           </div>
         </div>
       </div>
@@ -436,9 +443,8 @@ history
           </div>
         </div>
       </div>
+      <div class="extra-margin-bottom"></div>
+    </div> <!-- END History -->
 
+  </div>
 </div>
-
-
-</div>
-<div class="extra-margin-bottom"></div>

src/css/mobile.css

@@ -80,7 +80,7 @@ _:-ms-fullscreen, :root .main {
 @-moz-document url-prefix() {
   .extra-margin-bottom {
     display: block;
-    height: 75px;
+    height: 45px;
     overflow: hidden;
     clear: both;
   }
@@ -359,7 +359,7 @@ ul.off-canvas-list li a:hover {
   background: none;
 }
 
-a, button, .button, input, textarea, select, .reveal-modal {
+a, button, .button, input, textarea, select {
   -webkit-box-shadow: none !important;
   -moz-box-shadow: none !important;
   box-shadow: none !important;
@@ -555,23 +555,17 @@ a.pin-button:active {
   padding: 0;
   border: none;
   border-radius: 0;
-  top: 0;
+  overflow-y: auto;
-  height: 100%;
-  overflow: auto;
   padding-bottom: 20px;
 }
 
-.modal.fade .modal-dialog,
+.reveal-modal.animated.fadeOutUp, 
-.modal.in .modal-dialog,
+.reveal-modal.animated.slideInUp, 
-.reveal-modal-bg,
+.reveal-modal.animated.slideInDown {
-.reveal-modal-bg .fade .in,
+  -webkit-animation-duration: 0.3s;
-.reveal-modal,
+  animation-duration: 0.3s;
-.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 +685,7 @@ textarea:focus
   color: #B7C2CD;
 }
 
-.animation-left, .animation-right {
+.animation-slide {
   position: absolute;
   background: #fff;
   display: block;
@@ -704,52 +698,80 @@ textarea:focus
   transform: translate3d(0, 0, 0);
 }
 
-.animation-left.ng-enter, .animation-left.ng-leave,
+.animation-slide.ng-enter, 
-.animation-right.ng-enter, .animation-right.ng-leave {
+.animation-slide.ng-leave {
-  -webkit-transition: all ease 300ms;
+  -webkit-transition: 0.25s ease all;
-  transition: all ease 300ms;
+  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;
+  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.01s;
+  transition-delay: 0.1s;
-  opacity: 0;
+  visibility: hidden;
 }
 .animation-right.ng-enter {
   -webkit-transform: translate3d(-100%, 0, 0);
   transform: translate3d(-100%, 0, 0);
-  -webkit-transition-delay: 0.01s;
+  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.01s;
+  transition-delay: 0.1s;
-  opacity: 0;
+  visibility: hidden;
-}
-.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;
 }
 
-.animation-left.ng-leave,
+.animation-up.ng-enter {
-.animation-right.ng-leave {
+  -webkit-transform: translate3d(0, 100%, 0);
-  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 100%, 0);
-  transform: translate3d(0, 0, 0);
+  -webkit-transition-delay: 0.1s;
-  opacity: 0;
+  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;
+  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.01s;
+  transition-delay: 0.1s;
-  opacity: 0;
+  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;
+  -webkit-transition-delay: 0.1s;
-  transition-delay: 0.01s;
+  transition-delay: 0.1s;
-  opacity: 0;
+  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 {
@@ -760,7 +782,7 @@ textarea:focus
   top: 46px;
   bottom: 37px;
   overflow: auto;
-  padding-bottom: 20px;
+  padding-bottom: 40px;
 }
 
 .tab-in {
@@ -773,6 +795,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/app.js

@@ -6,7 +6,6 @@ var modules = [
   'mm.foundation',
   'monospaced.qrcode',
   'gettext',
-  'ngAnimate',
   'ngLodash',
   'uiSwitch',
   'bwcModule',

src/js/controllers/index.js

@@ -652,19 +652,28 @@ angular.module('copayApp.controllers').controller('indexController', function($r
 
   $rootScope.$on('Animation/Disable', function(event) {
     $timeout(function() {
-      self.swipeLeft = false;
+      self.slideLeft = false;
-      self.swipeRight = false;
+      self.slideRight = false;
-    }, 370);
+      self.slideUp = false;
+      self.slideDown = false;
+    }, 400);
   });
 
-  $rootScope.$on('Animation/SwipeLeft', function(event) {
+  $rootScope.$on('Animation/SlideLeft', function(event) {
-    self.swipeLeft = true;
+    self.slideLeft = true;
   });
 
-  $rootScope.$on('Animation/SwipeRight', function(event) {
+  $rootScope.$on('Animation/SlideRight', function(event) {
-    self.swipeRight = true;
+    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

@@ -91,6 +91,7 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
 
   $scope.openCopayersModal = function(copayers, copayerId) {
     var fc = profileService.focusedClient;
+       
     var ModalInstanceCtrl = function($scope, $modalInstance) {
       $scope.copayers = copayers;
       $scope.copayerId = copayerId;
@@ -99,15 +100,19 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
         $modalInstance.dismiss('cancel');
       };
     };
-    $modal.open({
+    var modalInstance = $modal.open({
-      animation: false,
       templateUrl: 'views/modals/copayers.html',
-      windowClass: 'full',
+      windowClass: 'full animated slideInUp',
       controller: ModalInstanceCtrl,
     });
+
+    modalInstance.result.finally(function() {
+      var m = angular.element(document.getElementsByClassName('reveal-modal'));
+      m.addClass('slideOutDown');
+    });
   };
 
-  $scope.openTxModal = function(tx, copayers) {
+  this.openTxpModal = function(tx, copayers) {
     var fc = profileService.focusedClient;
     var ModalInstanceCtrl = function($scope, $modalInstance) {
       $scope.error = null;
@@ -277,12 +282,16 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
     };
 
     var modalInstance = $modal.open({
-      animation: false,
       templateUrl: 'views/modals/txp-details.html',
-      windowClass: 'full',
+      windowClass: 'full animated slideInUp',
       controller: ModalInstanceCtrl,
     });
 
+    modalInstance.result.finally(function() {
+      var m = angular.element(document.getElementsByClassName('reveal-modal'));
+      m.addClass('slideOutDown');
+    });
+
     modalInstance.result.then(function(txp) {
       $scope.$emit('Local/TxProposalAction');
       if (txp) {
@@ -675,11 +684,16 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
         $modalInstance.dismiss('cancel');
       };
     };
-    $modal.open({
+    var modalInstance = $modal.open({
       templateUrl: 'views/modals/paypro.html',
-      windowClass: 'full',
+      windowClass: 'full animated slideInUp',
       controller: ModalInstanceCtrl,
     });
+
+    modalInstance.result.finally(function() {
+      var m = angular.element(document.getElementsByClassName('reveal-modal'));
+      m.addClass('slideOutDown');
+    });
   };
 
   this.setFromPayPro = function(uri) {
@@ -829,12 +843,16 @@ angular.module('copayApp.controllers').controller('walletHomeController', functi
       };
     };
 
-    $modal.open({
+    var modalInstance = $modal.open({
-      animation: false,
       templateUrl: 'views/modals/tx-details.html',
-      windowClass: 'full',
+      windowClass: 'full animated slideInUp',
       controller: ModalInstanceCtrl,
     });
+
+    modalInstance.result.finally(function() {
+      var m = angular.element(document.getElementsByClassName('reveal-modal'));
+      m.addClass('slideOutDown');
+    });
   };
 
   this.hasAction = function(actions, action) {

src/js/routes.js

@@ -16,11 +16,9 @@ if (window && window.navigator) {
 //Setting up route
 angular
   .module('copayApp')
-  .config(function(historicLogProvider, $provide, $logProvider, $stateProvider, $urlRouterProvider, $animateProvider) {
+  .config(function(historicLogProvider, $provide, $logProvider, $stateProvider, $urlRouterProvider) {
     $urlRouterProvider.otherwise('/');
 
-    $animateProvider.classNameFilter(/^(?:(?!ng-animate-disabled).)*$/);
-
     $logProvider.debugEnabled(true);
     $provide.decorator('$log', ['$delegate',
       function($delegate) {
@@ -506,7 +504,7 @@ angular
       receive: 0,
       send: 0,
       history: 0,
-      preferences: 0,
+      preferences: 11,
       preferencesColor: 12,
       backup: 12,
       preferencesAdvanced: 12,
@@ -517,7 +515,7 @@ angular
       preferencesBwsUrl: 12,
       about: 12,
       logs: 13,
-      add: 0,
+      add: 11,
       create: 12,
       join: 12,
       import: 12,
@@ -530,10 +528,21 @@ angular
     });
 
     $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
+
       if (pageWeight[fromState.name] > pageWeight[toState.name]) {
-        $rootScope.$emit('Animation/SwipeRight');
+        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/SwipeLeft');
+        if (pageWeight[toState.name] < 12) {
+          $rootScope.$emit('Animation/SlideUp');
+        }
+        else {
+          $rootScope.$emit('Animation/SlideLeft');
+        }
       }
 
       if (!profileService.profile && toState.needProfile) {

src/js/services/txStatus.js

@@ -35,11 +35,16 @@ angular.module('copayApp.services').factory('txStatus', function($modal, lodash,
       };
       if (cb) $timeout(cb, 100);
     };
-    $modal.open({
+    var modalInstance = $modal.open({
       templateUrl: 'views/modals/tx-status.html',
-      windowClass: 'full popup-tx-status',
+      windowClass: 'full popup-tx-status closeModalAnimation',
       controller: ModalInstanceCtrl,
     });
+
+    modalInstance.result.finally(function() {
+      var m = angular.element(document.getElementsByClassName('reveal-modal'));
+      m.addClass('animated fadeOutUp');
+    });
   };
 
   return root;