因大屏需求，制作一个倒计时效果，倒计时结束请求接口刷新数据；(记录一下，下次直接用)
实现原理大概如下：
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) // 一分钟后再次请求
}
}
