mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
79aee05a32
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.
41 lines
932 B
JavaScript
41 lines
932 B
JavaScript
IonicModule
|
|
.factory('$ionicClickBlock', [
|
|
'$document',
|
|
'$ionicBody',
|
|
'$timeout',
|
|
function($document, $ionicBody, $timeout) {
|
|
var fallbackTimer, isAttached;
|
|
var CSS_HIDE = 'click-block-hide';
|
|
|
|
var cb = $document[0].createElement('div');
|
|
cb.className = 'click-block';
|
|
|
|
return {
|
|
show: function() {
|
|
// cancel the fallback timer
|
|
$timeout.cancel( fallbackTimer );
|
|
|
|
ionic.requestAnimationFrame(function(){
|
|
if(isAttached) {
|
|
cb.classList.remove(CSS_HIDE);
|
|
} else {
|
|
$ionicBody.append(cb);
|
|
}
|
|
});
|
|
|
|
fallbackTimer = $timeout(function(){
|
|
cb.classList.add(CSS_HIDE);
|
|
}, 750);
|
|
},
|
|
hide: function() {
|
|
// cancel the fallback timer
|
|
$timeout.cancel( fallbackTimer );
|
|
|
|
// should be a minimum time it should hide
|
|
ionic.requestAnimationFrame(function(){
|
|
cb.classList.add(CSS_HIDE);
|
|
});
|
|
}
|
|
};
|
|
}]);
|