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>