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>