1👍
you can use some base code this link and handle compatible by vuejs.
I can’t find any demo for vuejs
but also first u should create a simple animation for this reaction and then add pure code timer.
after that u must merge CSS animation and js timer together.
0👍
As per the Vue functionality of countdown (for let’s say 10 seconds), it works as follow:
<template>
<div>{{ countdown }}</div>
</template>
<script>
export default {
data() {
countdown: 10
},
methods: {
countSeconds() {
if(this.countdown> 0) {
setTimeout(() => {
this.countdown-= 1
this.countSeconds()
}, 500);
}
}
},
created() {
this.countSeconds();
}
}
</script>
You can also make the 10 seconds easy dynamically based on your need! Also as per the animation, feel free to use transition or any other method based on your will!
- [Vuejs]-Setting data properties on create to use in prop
- [Vuejs]-Object is possibly 'undefined' in Vuex mutation with TypeScript
Source:stackexchange.com