From 98e4c3d1c201eba6d8a0bda960c73fba43c3a799 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Wed, 14 Jun 2023 09:32:55 +0800
Subject: [PATCH] add animation

---
 src/components/Countdown.vue           | 32 +++++++++++++++++++++++---
 src/components/dynamic/TextElement.vue |  2 +-
 src/style.css                          | 15 ++++++++++++
 3 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/src/components/Countdown.vue b/src/components/Countdown.vue
index 9aa6302b..26dc752a 100644
--- a/src/components/Countdown.vue
+++ b/src/components/Countdown.vue
@@ -1,20 +1,46 @@
 <script lang="ts" setup>
 import Countdown from '@chenfengyuan/vue-countdown';
+import { ref } from 'vue';
 
 const props = defineProps({
   time: { type: Number },
   css: { type: String },
 });
+
+const s = ref(0)
+
 </script>
 <template>
   <Countdown
     v-if="time"
     :time="time > 0 ? time : 0"
     v-slot="{ days, hours, minutes, seconds }"
+    class="countdown-container justify-items-center "
   >
-    <span class="text-primary font-bold" :class="css">{{ days }}</span> days 
+    <span class="text-primary font-bold " :class="css">{{ days }}</span> days 
     <span class="text-primary font-bold" :class="css">{{ hours }}</span> hours 
-    <span class="text-primary font-bold" :class="css">{{ minutes }}</span> minutes 
-    <span class="text-primary font-bold" :class="css">{{ seconds }}</span> seconds
+    <span class="text-primary font-bold" :class="css">{{ minutes }}</span> minutes
+      <span class="text-primary font-bold w-40" :class="css">
+        <Transition name="slide-up">
+          <span v-if="seconds % 2 === 0" class="countdown">{{ seconds }}</span> 
+          <span v-else="seconds % 2 === 1" class="countdown">{{ seconds }}</span>
+        </Transition>
+      </span>
+      <span class="ml-10">seconds</span>
   </Countdown>
 </template>
+
+<style>
+.countdown-container {
+  display: inline-flexbox;
+  position: relative;
+}
+
+.countdown {
+  position: absolute;
+  width: 45%;
+  text-align: right;
+  float: right;
+}
+
+</style>
diff --git a/src/components/dynamic/TextElement.vue b/src/components/dynamic/TextElement.vue
index a0c0704d..5e9ae150 100644
--- a/src/components/dynamic/TextElement.vue
+++ b/src/components/dynamic/TextElement.vue
@@ -70,7 +70,7 @@ const isConvertable = computed(() => {
     </div>
   </span>  
   <span v-else class="flex"><span>{{ text }}</span>
-    <span v-if="isConvertable" @click="toHexOutput = !toHexOutput" class="ml-2">
+    <span v-if="isConvertable" @click="toHexOutput = !toHexOutput" class="ml-2 cursor-pointer">
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
         <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
       </svg>
diff --git a/src/style.css b/src/style.css
index d710b6c0..98d838c1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -36,4 +36,19 @@ html[data-theme='dark'] {
 .table th:first-child {
   position: relative;
   z-index: 2;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.25s ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translateY(calc(80%));
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translateY(-calc(15%));
 }
\ No newline at end of file