lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

style: optimize PJAX loading progress

This commit is contained in:
XPoet 2021-01-14 15:19:38 +08:00
parent c750488394
commit bf43e4126d
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
source/css/layout/_partial/progress-bar.styl
View File

@ -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;
} }
} }

9
source/js/utils.js
View File

@ -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);
} }
} }