Changed wallet details transition behaviour

src/js/controllers/walletDetails.js

@@ -283,25 +283,28 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
   };
 
   var prevPos;
-
+  $scope.txHistoryPaddingBottom = 0;
   function getScrollPosition() {
     var scrollPosition = $ionicScrollDelegate.getScrollPosition();
     if (!scrollPosition) {
-      $window.requestAnimationFrame(function() {
+      $timeout(function() {
         getScrollPosition();
-      });
+      }, 25);
       return;
     }
     var pos = scrollPosition.top;
+    if (pos > 0) {
+      $scope.txHistoryPaddingBottom = "200px";
+    }
     if (pos === prevPos) {
-      $window.requestAnimationFrame(function() {
+      $timeout(function() {
         getScrollPosition();
-      });
+      }, 25);
       return;
     }
     prevPos = pos;
     refreshAmountSection(pos);
-  };
+  }
 
   function refreshAmountSection(scrollPos) {
     var AMOUNT_HEIGHT_BASE = 210;
@@ -355,18 +358,23 @@ angular.module('copayApp.controllers').controller('walletDetailsController', fun
     }
 
     var t = amountTop;
-
+    if (scrollPos > 50) {
-    $scope.altAmountOpacity = (amountHeight - 100) / 80;
+      contentMargin = amountHeight = 80;
-    $scope.buttonsOpacity = (amountHeight - 140) / 70;
+      $scope.altAmountOpacity = 0.01;
-    $window.requestAnimationFrame(function() {
+      $scope.buttonsOpacity = 0.01;
-      $scope.amountHeight = amountHeight + 'px';
+    } else {
-      $scope.contentMargin = contentMargin + 'px';
+      contentMargin = amountHeight = 210;
-      $scope.amountScale = 'scale3d(' + s + ',' + s + ',' + s + ') translateY(' + t + 'px)';
+      $scope.altAmountOpacity = 1;
-      $scope.$digest();
+      $scope.buttonsOpacity = 1;
-      getScrollPosition();
+    }
-    });
+    $scope.amountHeight = amountHeight + 'px';
+    $scope.contentMargin = contentMargin + 'px';
+    $scope.amountScale = 'scale3d(' + s + ',' + s + ',' + s + ') translateY(' + t + 'px)';
+    $scope.$digest();
+    getScrollPosition();
   }
 
+  var scrollEffectTimeout;
   var scrollWatcherInitialized;
 
   $scope.$on("$ionicView.enter", function(event, data) {

src/sass/views/walletDetails.scss

@@ -159,6 +159,7 @@
 
     padding-top: 0;
     top: 0;
+    transition: margin-top 0.5s ease-in-out;
     margin-bottom: 16px;
 
     .scroll {
@@ -199,7 +200,8 @@
       width: 100%;
       position: absolute;
       bottom: 20px;
-
+      transition-delay: 0.25s;
+      transition: opacity 0.4s ease-in-out;
       >.col {
         padding: 5px 10px;
         margin-bottom: 0;
@@ -219,14 +221,15 @@
     }
   }
   .amount {
-    width: 100%;
-    text-align: center;
-    color: #fff;
-    height: 230px;
-    padding-top: 40px;
-    display: block;
     align-items: center;
+    color: #fff;
+    display: block;
+    height: 230px;
     justify-content: center;
+    padding-top: 40px;
+    text-align: center;
+    transition: height 0.5s ease-in-out;
+    width: 100%;
 
     &__balance {
       -webkit-transform: scale3d(1, 1, 1) translateY(45px);

www/views/walletDetails.html

@@ -300,7 +300,7 @@
         <span translate>{{updatingTxHistoryProgress}} transactions downloaded</span>
       </div>
 
-      <div class="wallet-details__list" ng-show="txHistory[0] && !updatingTxHistory">
+      <div ng-style="{'padding-bottom': txHistoryPaddingBottom}" class="wallet-details__list" ng-show="txHistory[0] && !updatingTxHistory">
         <div ng-repeat="btx in txHistory track by $index" ng-click="openTxModal(btx)">
           <span ng-include="'views/includes/walletHistory.html'"></span>
         </div>