uniapp的动画运用（五）倒计时动画DEMO

一、效果如下

二、代码示例

<template>
  <!-- 倒计时模态框 -->
  <u-mask :show="isShowModal">
    <view class="count-down-wrap">
      <view class="num-label" :class="{ 'count-down-ani': isAnimation }">{{
        num > 0 ? num : 'GO!'
      }}</view>
    </view>
  </u-mask>
</template>
<script>
export default {
  data() {
    return {
      //是否显示模态框
      isShowModal: false,
      //默认数字
      num: 3,
      //定时器
      timer: null,
      //是否开启动画
      isAnimation: false
    }
  },
  watch: {
    isShowModal(newValue) {
      if (newValue) {
        //开启动画定时器
        this.startAnimationTimer()
      }
    }
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    //显示弹窗提示
    show() {
      this.isShowModal = true
    },
    //关闭模态框
    close() {
      this.isShowModal = false
      //关闭动画
      this.isAnimation = false
      //关闭之后恢复数字
      setTimeout(() => {
        this.num = 3
      }, 1000)
      //通知父组件
      this.$emit('close')
    },
    //开启动画定时器
    startAnimationTimer() {
      if (this.timer) {
        return
      }
      //标记开启动画
      this.isAnimation = true
      //开启定时
      this.timer = setInterval(() => {
        this.num--
        if (this.num <= 0) {
          //关闭定时器
          clearInterval(this.timer)
          this.timer = null
          //关闭弹窗(1s之后关闭,让GO!显示出来再关闭)
          setTimeout(() => {
            this.close()
          }, 1000)
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss">
.count-down-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .num-label {
    font-size: 120rpx;
    font-weight: 500;
    color: #ff0000;
    transform: scale(0);
  }
}

.count-down-ani {
  animation: cdScaleAni 1s infinite;
  @keyframes cdScaleAni {
    0% {
      transform: scale(0);
    }
    50% {
      transform: scale(3);
    }
  }
}
</style>