[Vuejs]-How to create vueJS countdown with animation?

1👍

you can use some base code this link and handle compatible by vuejs.

demo code pen

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!

Leave a comment