add animation
This commit is contained in:
parent
3d20aee8eb
commit
98e4c3d1c2
@ -1,20 +1,46 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import Countdown from '@chenfengyuan/vue-countdown';
|
import Countdown from '@chenfengyuan/vue-countdown';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
time: { type: Number },
|
time: { type: Number },
|
||||||
css: { type: String },
|
css: { type: String },
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const s = ref(0)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<Countdown
|
<Countdown
|
||||||
v-if="time"
|
v-if="time"
|
||||||
:time="time > 0 ? time : 0"
|
:time="time > 0 ? time : 0"
|
||||||
v-slot="{ days, hours, minutes, seconds }"
|
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">{{ hours }}</span> hours
|
||||||
<span class="text-primary font-bold" :class="css">{{ minutes }}</span> minutes
|
<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 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>
|
</Countdown>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.countdown-container {
|
||||||
|
display: inline-flexbox;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.countdown {
|
||||||
|
position: absolute;
|
||||||
|
width: 45%;
|
||||||
|
text-align: right;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
@ -70,7 +70,7 @@ const isConvertable = computed(() => {
|
|||||||
</div>
|
</div>
|
||||||
</span>
|
</span>
|
||||||
<span v-else class="flex"><span>{{ text }}</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">
|
<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" />
|
<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>
|
</svg>
|
||||||
|
@ -37,3 +37,18 @@ html[data-theme='dark'] {
|
|||||||
position: relative;
|
position: relative;
|
||||||
z-index: 2;
|
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%));
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user