From 601b1d5c8978d42674b89b58086793598651f91e Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 26 Aug 2023 19:10:06 +0800
Subject: [PATCH] modify style

---
 src/components/desktop/PieChart.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/desktop/PieChart.vue b/src/components/desktop/PieChart.vue
index 7f4dbd17..7e1f781b 100644
--- a/src/components/desktop/PieChart.vue
+++ b/src/components/desktop/PieChart.vue
@@ -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>