一步步教你如何实现小程序倒计时三二一后跳转页面功能，附加倒计时过渡动画

---

前言

实现此效果涉及到的知识点：
1.this.setData({}) 实现页面的同步更新
2.设置定时器和清除定时器
3.附：监听css3动画animation结束触发：bindanimationend

---

一、页面内容及布局样式

/*index.qml*/
<view class="mask-num" bindanimationend='animationend'>
       {{countDownNum}}
</view>
<view class="mask-numtext">
     倒计时后开始
</view>

/*index.qss*/
.mask-num{
    height: 74rpx;
    font-family: PingFang SC;
    font-style: normal;
    font-weight: 600;
    font-size: 60rpx;
    line-height: 122%;
    text-align: center;
    color: #FFFFFF;
    animation: mask-num 1.1s linear;  
}


/* 定义keyframe动画，命名为mask-num，实现倒计时会过渡的效果 */
@keyframes mask-num{
  0%{opacity: 1;}
  100%{opacity: 0.6;} 
}

/* 在倒计时时下方文字样式 */
.mask-numtext{
  height: 44rpx;
  font-family: PingFang SC;
  font-style: normal;
  font-weight: 500;
  font-size: 32rpx;
  line-height: 44rpx;
  text-align: center;
  color: #FFFFFF;
}

二、页面逻辑
页面的逻辑主要分为两部：
1.设置定时器处理页面数字的变换（从3到1）
2.当数字转变到1时，跳转页面
（为达到过渡得不那么生硬，会适当地添加延时器：setTimeout）

Page({
    data: {
        timer: '',//定时器名字
        countDownNum: '3',//倒计时初始值
    },
    //倒计时定时器
    countDown() {
        let that = this;
        let countDownNum = that.data.countDownNum;//获取倒计时初始值
        //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
        that.setData({
            timer: setInterval(function () {//这里把setInterval赋值给变量名为timer的变量
                //每隔一秒countDownNum就减一，实现同步
                countDownNum--;
                //然后把countDownNum存进data，页面同步
                that.setData({
                    countDownNum: countDownNum
                })
                if (countDownNum == 1) {
                //当倒计时达到1时，关闭定时器和触发跳转页面事件
               //这里特别要注意，计时器是始终一直在走的，要记得关掉定时器！不然相当耗性能
              clearInterval(that.data.timer);
              //关闭定时器之后，触发跳转页面事件
               setTimeout(() => {
                        qq.$navigateTo('/pages/scene/scene')
                    }, 800)
                }
            }, 1000)
        })
    },
    /*监听动画结束后触发的事件，在此例子暂时不用上*/
    animationend() {
        //此处写你要触发的方法
    },

*参考文章链接：微信小程序用定时器实现倒计时效果

如果此篇博客能帮得到你，欢迎大家关注，点赞，评论，收藏，转发呀~

如有不足也请在评论区提出批评指正！多多指教！