css计时器 animation实现计时器延时器
缺点当切页面导航会休眠不执行
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>style="animation-delay: 5s" 写到行内是因为可以动态添加?
原生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>