深圳市住房和建设局网站住房保障服务,中国发展在线网站官网,外贸网站网站建设,网站建设 报告css计时器 animation实现计时器延时器
缺点当切页面导航会休眠不执行
最初需求是一个列表每个项目都有各自的失效时间 然后就想到 计时器延时器轮询等方案 这些方案每一个都要有自己的计时器 感觉不是很好 轮询也占资源 然后突发奇想 css能不能实现 开始想到的是transition测…css计时器 animation实现计时器延时器
缺点当切页面导航会休眠不执行
最初需求是一个列表每个项目都有各自的失效时间 然后就想到 计时器延时器轮询等方案 这些方案每一个都要有自己的计时器 感觉不是很好 轮询也占资源 然后突发奇想 css能不能实现 开始想到的是transition测试结果限制太大 然后就想到了动画 可以设置动画的执行时间 重复次数 延迟执行等 这些和计时器延时器类似 然后就去找js的监听事件 发现有监听动画的事件 经过测试 发现还可以
以下为测试的demo 动画的事件可以随意更改 如color width transform 看自己的需求
可以将 animation-delay放到style中 实现每个元素独立的延时器效果
vue框架
templatediv classbox!-- 使用v-bind动态添加样式 --div classmove :style{ animationDelay: 5s } animationendonDelayEndwebkitAnimationEndonDelayEnddiv classno/divdiv classoff/div/divdiv classboxdiv classmove2animationiterationonIntervalIterationwebkitAnimationIterationonIntervalIterationdiv classno/divdiv classoff/div/div/div/div
/templatescript
export default {data() {return {delayCount: 0,intervalCount: 0,};},methods: {onDelayEnd() {console.log(延时器 setTimeout);// 在此处可以添加延时器结束后的处理逻辑},onIntervalIteration() {this.intervalCount;console.log(计时器 setInterval this.intervalCount);// 在此处可以添加计时器每次迭代时的处理逻辑},},
};
/scriptstyle 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
htmlheadmeta charsetutf-8title/titlestyle typetext/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/headbodydiv classbox
!-- styleanimation-delay: 5s 写到行内是因为可以动态添加 --div classmove styleanimation-delay: 5sdiv classno/divdiv classoff/div/div/divdiv classboxdiv classmove2div classno/divdiv classoff/div/div/div/bodyscript typetext/javascriptdocument.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
