perf: optimize progress bar

varletjs · Jun 11, 2021 · 0b349db · 0b349db
1 parent 81d1651
commit 0b349db
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/varlet-cli/site/pc/main.ts b/packages/varlet-cli/site/pc/main.ts
@@ -21,11 +21,20 @@ const router = createRouter({
   routes,
 })
 
+let isEnd = true
 const { start, end } = useProgress()
 
-router.beforeEach(() => start())
+router.beforeEach(() => {
+  isEnd = false
+  setTimeout(() => {
+    if (!isEnd) start()
+  }, 200)
+})
 
-router.afterEach(() => end())
+router.afterEach(() => {
+  isEnd = true
+  end()
+})
 
 window.top['router'] = router
 

diff --git a/packages/varlet-cli/site/useProgress.ts b/packages/varlet-cli/site/useProgress.ts
@@ -13,7 +13,7 @@ export function useProgress() {
     },
     trackColor: '#fff',
     color: '#3594d9',
-    lineWidth: 2,
+    lineWidth: 3,
     value: 0
   })
 

diff --git a/packages/varlet-ui/src/progress/progress.less b/packages/varlet-ui/src/progress/progress.less
@@ -41,7 +41,7 @@
       background-color: @progress-background;
       top: 0;
       left: 0;
-      transition: all 0.2s;
+      transition: all 0.2s, background-color 0.8s;
     }
 
     &__label {