vue使用自定义动画，写个倒计时动画

最新推荐文章于 2024-03-23 14:29:44 发布

原创最新推荐文章于 2024-03-23 14:29:44 发布 · 559 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端基础专栏收录该内容

25 篇文章

订阅专栏

文章讲述了如何通过CSS自定义动画改进原本使用setInterval实现的倒计时跳转功能，以创建更平滑的用户体验。在Vue.js环境中，作者展示了如何结合@keyframes和数据绑定动态更新数字，使其逐渐缩小并消失，然后切换到下一个数字，直至倒计时结束并自动跳转页面。

当需要有个提示框，倒计时几秒后自动跳转页面，单纯的写个setinterval，从几秒减到0再跳转，虽然能满足需求，但是效果不太好。找事的老板就提出优化一下，此时内心万马奔腾。

想到用animation自定义动画，写个倒计时，就是数字从小变大，再慢慢消失，再到下一位数字从小变大，如此循环


<div class="anidiv">{{num}}</div>


data(){
    return{
        num:5
    }
}

methods:{
    animethods(){
         var interval= setInterval(()=>{
                if(this.num>0){
                    this.num--
                }else{
                    clearInterval(interval)
                }
             },1000)
    }
}

mounted(){
    this.animethods()
}

<style>
.anidiv{
    font-size:30px;
    animation-name:time;
    animation-timing-function:linear;
    animation-duration:1s;
    animation-iteration-count:infinite;
}
@keyframes time{
    0%{

    }
    50%{
        transform:scale(1.5)
    }
    70%{
        transform:scale(2)
        opacity:0.4
    }
    100%{
        opacity:0
    }
}
</style>