css计时器 animation实现计时器延时器
缺点当切页面导航会休眠不执行
最初需求是一个列表每个项目都有各自的失效时间 然后就想到 计时器延时器轮询等方案 这些方案每一个都要有自己的计时器 感觉不是很好 轮询也占资源 然后突发奇想 css能不能实现 开始想到的是transition测试结果限制太大 然后就想到了动画 可以设置动画的执行时间 重复次数 延迟执行等 这些和计时器延时器类似 然后就去找js的监听事件 发现有监听动画的事件 经过测试 发现还可以
以下为测试的demo 动画的事件可以随意更改 如color width transform 看自己的需求
可以将 animation-delay放到style中 实现每个元素独立的延时器效果
vue框架
<template><div class="box"><!-- 使用v-bind动态添加样式 --><div class="move" :style="{ animationDelay: '5s' }" @animationend="onDelayEnd"@webkitAnimationEnd="onDelayEnd"><div class="no"></div><div class="off"></div></div><div class="box"><div class="move2"@animationiteration="onIntervalIteration"@webkitAnimationIteration="onIntervalIteration"><div class="no"></div><div class="off"></div></div></div></div>
</template><script>
export default {data() {return {delayCount: 0,intervalCount: 0,};},methods: {onDelayEnd() {console.log('延时器 setTimeout');// 在此处可以添加延时器结束后的处理逻辑},onIntervalIteration() {this.intervalCount++;console.log('计时器 setInterval ' + this.intervalCount);// 在此处可以添加计时器每次迭代时的处理逻辑},},
};
</script><style scoped>
.box {width: 50px;height: 50px;margin: 0 auto;border: 2px solid #ccc;overflow: hidden;
}.move,
.move2 {position: relative;width: 100px;height: 50px;display: flex;justify-content: flex-start;
}.move {animation-name: move;animation-duration: 0;animation-fill-mode: forwards;
}.move2 {animation-name: move2;animation-duration: 1s;animation-iteration-count: infinite;
}.no,
.off {width: 50%;height: 50px;
}.no {background: gold;
}.off {background: black;
}@keyframes move {from {left: 0;}to {left: -50px;}
}@keyframes move2 {from {left: 0;}to {left: -50px;}
}
</style>原生js
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.box {width: 50px;height: 50px;margin: 0 auto;border: 2px solid #ccc;overflow: hidden;}.move2,.move {position: relative;width: 100px;height: 50px;display: flex;justify-content: flex-start;}.move {animation-name: move;animation-duration: 0;animation-fill-mode: forwards;}.move2 {animation-name: move2;animation-duration: 1s;animation-iteration-count: infinite;}.off,.no {width: 50%;height: 50px;}.no {background: gold;}.off {background: black;}@keyframes move {from {left: 0}to {left: -50px}}@keyframes move2 {from {left: 0}to {left: -50px}}</style></head><body><div class="box">
<!-- style="animation-delay: 5s" 写到行内是因为可以动态添加 --><div class="move" style="animation-delay: 5s"><div class="no"></div><div class="off"></div></div></div><div class="box"><div class="move2"><div class="no"></div><div class="off"></div></div></div></body><script type="text/javascript">document.getElementsByClassName('move')[0].addEventListener('animationend', function() {console.log('延时器 setTimeout')});let count = 0// let timer = setInterval(() => {// console.log(++count)// }, 1000)document.getElementsByClassName('move2')[0].addEventListener('animationiteration', function() {console.log('计时器 setInterval '+ ++count)// clearInterval(timer)// count = 0// timer = setInterval(() => {// console.log(++count)// }, 1000)});</script>
</html>
