refactor(clickBlock): only use click block when animating

js/angular/service/clickBlock.js

@@ -4,36 +4,37 @@ IonicModule
   '$ionicBody',
   '$timeout',
 function($document, $ionicBody, $timeout) {
-  var fallbackTimer, isAttached;
   var CSS_HIDE = 'click-block-hide';
-  var pendingShow;
+  var cbEle, fallbackTimer, pendingShow;
 
-  var cb = $document[0].createElement('div');
-  cb.className = 'click-block';
+  function addClickBlock() {
+    if (pendingShow) {
+      if (cbEle) {
+        cbEle.classList.remove(CSS_HIDE);
+      } else {
+        cbEle = $document[0].createElement('div');
+        cbEle.className = 'click-block';
+        $ionicBody.append(cbEle);
+      }
+      pendingShow = false;
+    }
+  }
+
+  function removeClickBlock() {
+    cbEle && cbEle.classList.add(CSS_HIDE);
+  }
 
   return {
     show: function(autoExpire) {
       pendingShow = true;
-      // cancel the fallback timer
       $timeout.cancel(fallbackTimer);
-
-      ionic.requestAnimationFrame(function() {
-        if (pendingShow) {
-          if (isAttached) {
-            cb.classList.remove(CSS_HIDE);
-          } else {
-            $ionicBody.append(cb);
-            isAttached = true;
-          }
-        }
-      });
-
       fallbackTimer = $timeout(this.hide, autoExpire || 310);
+      ionic.requestAnimationFrame(addClickBlock);
     },
     hide: function() {
       pendingShow = false;
       $timeout.cancel(fallbackTimer);
-      cb.classList.add(CSS_HIDE);
+      ionic.requestAnimationFrame(removeClickBlock);
     }
   };
 }]);

js/angular/service/viewSwitcher.js

@@ -112,7 +112,6 @@ function($timeout, $document, $q, $ionicClickBlock, $ionicConfig, $ionicNavBarDe
         init: function(registerData, callback) {
           ionicViewSwitcher.isTransitioning(true);
 
-          $ionicClickBlock.show();
           switcher.loadViewElements(registerData);
 
           switcher.render(registerData, function() {
@@ -228,6 +227,7 @@ function($timeout, $document, $q, $ionicClickBlock, $ionicConfig, $ionicNavBarDe
             // 2) attach transitionend events (and fallback timer)
             enteringEle.on(TRANSITIONEND_EVENT, transitionComplete);
             enteringEle.data(DATA_FALLBACK_TIMER, $timeout(transitionComplete, 1000));
+            $ionicClickBlock.show();
           }
 
           // 3) stage entering element, opacity 0, no transition duration

scss/_transitions.scss

@@ -75,8 +75,8 @@ $ios-transition-container-bg-color:    #000 !default;
 // Android View Transitions
 // -------------------------------
 
-$android-transition-duration-entering:       250ms !default;
-$android-transition-duration-leaving:        160ms !default;
+$android-transition-duration-entering:       300ms !default;
+$android-transition-duration-leaving:        200ms !default;
 $android-transition-timing-entering:         cubic-bezier(0.4, 0.6, 0.2, 1) !default;
 $android-transition-timing-leaving:          cubic-bezier(0.4, 0, 1, 1) !default;