diff --git a/js/angular/service/clickBlock.js b/js/angular/service/clickBlock.js index ebd85b3fad..defc3bb482 100644 --- a/js/angular/service/clickBlock.js +++ b/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); } }; }]); diff --git a/js/angular/service/viewSwitcher.js b/js/angular/service/viewSwitcher.js index a1ecca7709..b4957b074f 100644 --- a/js/angular/service/viewSwitcher.js +++ b/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 diff --git a/scss/_transitions.scss b/scss/_transitions.scss index 60eee389ef..458ee7cbc0 100644 --- a/scss/_transitions.scss +++ b/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;