modify style

2023-08-26 19:10:06 +08:00
parent 8b593883a7
commit 601b1d5c89
1 changed files with 17 additions and 1 deletions
@@ -1,5 +1,5 @@
 <template>
-    <v-chart class="pie-chart-container" autoresize :option="chartOptions"
+    <v-chart autoresize class="pie-chart-container" :class="{ 'transition-in': skeleton }" :option="chartOptions"
             @click="clickItem" @legendselectchanged="onLegendSelectChanged" />
 </template>

@@ -305,4 +305,20 @@ export default {
        height: 500px;
    }
 }
+
+.pie-chart-container.transition-in {
+    animation: pie-chart-skeleton-fade-in 2s 1;
+}
+
+@keyframes pie-chart-skeleton-fade-in {
+    0% {
+        opacity: 0;
+    }
+    20% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
 </style>