From f3b95cdbe64117938eb043305b91ab55a6330df5 Mon Sep 17 00:00:00 2001
From: chenjinsong <523037378@qq.com>
Date: Thu, 8 Sep 2022 15:40:42 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20loading=E5=8A=A8=E7=94=BB=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=B7=A1=E5=85=A5=E6=B7=A1=E5=87=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/common.scss        | 11 +++++++++++
 src/components/common/Loading.vue | 13 +++++++------
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/assets/css/common.scss b/src/assets/css/common.scss
index c86c1c15..38c8cf36 100644
--- a/src/assets/css/common.scss
+++ b/src/assets/css/common.scss
@@ -28,3 +28,14 @@ body {
   fill: currentColor;
   overflow: hidden;
 }
+
+/* 淡入淡出动画 */
+.fade-enter-active,
+.fade-leave-active {
+ transition: opacity 0.4s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
diff --git a/src/components/common/Loading.vue b/src/components/common/Loading.vue
index df20a2c6..70ea7064 100644
--- a/src/components/common/Loading.vue
+++ b/src/components/common/Loading.vue
@@ -1,12 +1,13 @@
 <template>
-  <div class="chart__loading" v-show="loading">
-<!--    <img :class="className" :src="path" alt="" :style="innerStyle">-->
-    <div class="cn-loading" :class="className">
-      <div class="cn-loading__inner">
-      <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+  <Transition name="fade">
+    <div class="chart__loading" v-show="loading">
+      <div class="cn-loading" :class="className">
+        <div class="cn-loading__inner">
+          <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+        </div>
       </div>
     </div>
-  </div>
+  </Transition>
 </template>
 
 <script>