From bf43e4126dc8501c2f0b5dfb6957ae765ff713c6 Mon Sep 17 00:00:00 2001
From: XPoet <i@xpoet.cn>
Date: Thu, 14 Jan 2021 15:19:38 +0800
Subject: [PATCH] style: optimize PJAX loading progress

---
 source/css/layout/_partial/progress-bar.styl | 7 ++-----
 source/js/utils.js                           | 9 +++++++--
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/source/css/layout/_partial/progress-bar.styl b/source/css/layout/_partial/progress-bar.styl
index 3298a43..14fc283 100644
--- a/source/css/layout/_partial/progress-bar.styl
+++ b/source/css/layout/_partial/progress-bar.styl
@@ -17,10 +17,9 @@
       visibility: hidden;
       opacity: 0;
       z-index: $z-index-8;
-      transition();
+      transition: all 0.1s ease;
 
       &.show {
-        transition();
         opacity: 1;
         visibility: visible;
       }
@@ -68,9 +67,7 @@
       z-index: $z-index-7;
 
       &.hide {
-        //transition: none;
-        display: none;
-        //visibility: hidden !important;
+        display: none !important;
       }
     }
 
diff --git a/source/js/utils.js b/source/js/utils.js
index c312916..37bdcd7 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -281,14 +281,19 @@ KEEP.initUtils = () => {
       this.pjaxProgressBarTimer && clearInterval(this.pjaxProgressBarTimer);
       this.pjaxProgressBar_dom.style.width = '100%';
 
-      const tempTimeout = setTimeout(() => {
+      const temp_1 = setTimeout(() => {
         this.pjaxProgressBar_dom.classList.remove('show');
         this.pjaxProgressIcon_dom.classList.remove('show');
 
         if (this.isHasScrollProgressBar) {
           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);
     }
   }