add animation

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>

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>

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%));
 }