style: optimize PJAX loading progress
This commit is contained in:
parent
c750488394
commit
bf43e4126d
|
@ -17,10 +17,9 @@
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
z-index: $z-index-8;
|
z-index: $z-index-8;
|
||||||
transition();
|
transition: all 0.1s ease;
|
||||||
|
|
||||||
&.show {
|
&.show {
|
||||||
transition();
|
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
}
|
}
|
||||||
|
@ -68,9 +67,7 @@
|
||||||
z-index: $z-index-7;
|
z-index: $z-index-7;
|
||||||
|
|
||||||
&.hide {
|
&.hide {
|
||||||
//transition: none;
|
display: none !important;
|
||||||
display: none;
|
|
||||||
//visibility: hidden !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -281,14 +281,19 @@ KEEP.initUtils = () => {
|
||||||
this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer);
|
this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer);
|
||||||
this.pjaxProgressBar_dom.style.width = '100%';
|
this.pjaxProgressBar_dom.style.width = '100%';
|
||||||
|
|
||||||
const tempTimeout = setTimeout(() => {
|
const temp_1 = setTimeout(() => {
|
||||||
this.pjaxProgressBar_dom.classList.remove('show');
|
this.pjaxProgressBar_dom.classList.remove('show');
|
||||||
this.pjaxProgressIcon_dom.classList.remove('show');
|
this.pjaxProgressIcon_dom.classList.remove('show');
|
||||||
|
|
||||||
if (this.isHasScrollProgressBar) {
|
if (this.isHasScrollProgressBar) {
|
||||||
this.scrollProgressBar_dom.classList.remove('hide');
|
this.scrollProgressBar_dom.classList.remove('hide');
|
||||||
}
|
}
|
||||||
clearTimeout(tempTimeout);
|
|
||||||
|
const temp_2 = setTimeout(() => {
|
||||||
|
this.pjaxProgressBar_dom.style.width = '0';
|
||||||
|
clearTimeout(temp_1), clearTimeout(temp_2);
|
||||||
|
}, 200);
|
||||||
|
|
||||||
}, 200);
|
}, 200);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue