From d2bb83a0b34f87713fcc4306ec75d4a1523576c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20Ku=C4=87mierz?= <gkucmierz@gmail.com>
Date: Thu, 7 Dec 2023 06:25:30 +0100
Subject: [PATCH] add vue transition

---
 src/components/HelloWorld.vue | 32 ++++++++++++++++++++++----------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
index 364b889..925d467 100644
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -111,19 +111,31 @@ const showSources = ref(true);
 <template>
   <div class="box" @click="showSources = !showSources">
     <p class="average">1 BTC = <span class="nobr">{{ format(average) }} USD</span></p>
-    <div v-show="showSources">
-      <p>Data Sources:</p>
-      <ul>
-        <li v-for="(val, i) in dataSources">
-          {{ val.name }}: {{ format(prices[i]) }}
-        </li>
-      </ul>
-      <p>Standard Deviation: {{ stdev }}</p>
-    </div>
+    <Transition>
+      <div v-show="showSources">
+        <p>Data Sources:</p>
+        <ul>
+          <li v-for="(val, i) in dataSources">
+            {{ val.name }}: {{ format(prices[i]) }}
+          </li>
+        </ul>
+        <p>Standard Deviation: {{ stdev }}</p>
+      </div>
+    </Transition>
   </div>
 </template>
 
 <style scoped>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+
 .box {
   cursor: pointer;
 
@@ -137,7 +149,7 @@ const showSources = ref(true);
   backdrop-filter: blur(2px);
 
   color: #333;
-  padding: 10px 20px;
+  padding: 32px;
 }
 
 .average {