mask渐变，避免点击闪烁

src/App.vue

@@ -5,17 +5,8 @@
     size="large"
     :spinning="spinning"
     :delay="32"
-    style="
-      position: absolute;
-      top: 0;
-      left: 0;
-      height: 100vh;
-      width: 100vw;
-      display: flex;
-      place-content: center;
-      align-items: center;
-    "
-    :style="spinning && { zIndex: 6000, backgroundColor: 'grey', opacity: 0.7 }"
+    class="global-mask fade-in"
+    :style="spinning && { zIndex: 6000 }"
   />
 </template>
 
@@ -69,4 +60,32 @@ export default defineComponent({
   color: #2c3e50;
   width: 100%;
 }
+
+.global-mask {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100vh;
+  width: 100vw;
+  display: flex;
+  place-content: center;
+  align-items: center;
+  background-color: grey;
+}
+.fade-in {
+  opacity: 0.7;
+  animation-name: fadeInOpacity;
+  animation-iteration-count: 1;
+  animation-timing-function: ease-in;
+  animation-duration: 2s;
+}
+
+@keyframes fadeInOpacity {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.7;
+  }
+}
 </style>