css计时器 animation实现计时器延时器

2024-01-08 10:31:55

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>

文章来源:https://blog.csdn.net/divpoxiao/article/details/135397386
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。