refactor(clickBlock): transform css for click block

Use transform/opacity CSS properties to show and hide the click block
element, and use requestAnimationFrame for the DOM changes. This is
easier for the GPU to use transform/opacity properties instead of the
display property, and also reduces any potential reflows.

js/angular/service/clickBlock.js

@@ -4,7 +4,8 @@ IonicModule
   '$ionicBody',
   '$timeout',
 function($document, $ionicBody, $timeout) {
-  var fallbackTimer;
+  var fallbackTimer, isAttached;
+  var CSS_HIDE = 'click-block-hide';
 
   var cb = $document[0].createElement('div');
   cb.className = 'click-block';
@@ -14,14 +15,17 @@ function($document, $ionicBody, $timeout) {
       // cancel the fallback timer
       $timeout.cancel( fallbackTimer );
 
-      if(cb.parentElement) {
-        cb.classList.remove('hide');
-      } else {
-        $ionicBody.append(cb);
-      }
+      ionic.requestAnimationFrame(function(){
+        if(isAttached) {
+          cb.classList.remove(CSS_HIDE);
+        } else {
+          $ionicBody.append(cb);
+        }
+      });
+
       fallbackTimer = $timeout(function(){
-        cb.classList.add('hide');
-      }, 500);
+        cb.classList.add(CSS_HIDE);
+      }, 750);
     },
     hide: function() {
       // cancel the fallback timer
@@ -29,7 +33,7 @@ function($document, $ionicBody, $timeout) {
 
       // should be a minimum time it should hide
       ionic.requestAnimationFrame(function(){
-        cb.classList.add('hide');
+        cb.classList.add(CSS_HIDE);
       });
     }
   };

scss/_util.scss

@@ -69,7 +69,11 @@
   z-index: $z-index-click-block;
   width: 100%;
   height: 100%;
-  background: transparent;
+  opacity: 0;
+  @include translate3d(0, 0, 0);
+}
+.click-block-hide {
+  @include translate3d(-9999px, 0, 0);
 }
 
 .no-resize {