css计时动画,vue css 动画animation 倒计时

因大屏需求，制作一个倒计时效果，倒计时结束请求接口刷新数据；(记录一下，下次直接用)

实现原理大概如下：

css

.timeNum {

.daoJiShi {

position: fixed;

top: 50%;

left: 50%;

font-size: 150px;

height: 150px;

animation: flipOutY 1s ease both infinite;

-webkit-animation: flipOutY 1s ease both infinite;

-moz-animation: flipOutY 1s ease both infinite;

}

}

@keyframes flipOutY { // 倒计时动画

0% {

-webkit-transform: perspective(400px) rotateY(0deg);

opacity: .8;

transform: scaleX(3) scaleY(3);

margin-top: -225px;

}

100% {

-webkit-transform: perspective(400px) rotateY(90deg);

opacity: 0;

transform: scaleX(0) scaleY(1);

margin-top: -150px;

}

}

html：

{{ timeOut }}

js(vue+ ts)：

timeOut:number = 0 // init倒计时设置

daoJiShi:boolean = true

// 方法

timeRun ():void { // 请求倒计时

if (this.timeOut !== 0) {

this.daoJiShi = true

this.timeOut--

setTimeout(() => {

this.timeRun()

}, 1000)

} else {

this.timeOut = 6

this.daoJiShi = false

setTimeout(() => {

this.timeRun()

}, 10 * 1000) // 一分钟后再次请求

}

}