当前位置：首页 > news >正文

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

news 2026/5/12 8:41:37

缺点当切页面导航会休眠不执行

最初需求是一个列表每个项目都有各自的失效时间然后就想到计时器延时器轮询等方案这些方案每一个都要有自己的计时器感觉不是很好轮询也占资源然后突发奇想 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>

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

css计时器 animation实现计时器延时器缺点当切页面导航会休眠不执行最初需求是一个列表每个项目都有各自的失效时间然后就想到计时器延时器轮询等方案这些方案每一个都要有自己的计时器感觉不是很好轮询也占资源然后突发奇想 css能不能实现开始想到的是transition测…...

编程日记 2024/1/9 5:29:56

【win11 绕过TPM CPU硬件限制安装】

Qt编程指南 VX：hao541022348 ■ 下载iso文件■ 右键文件点击装载出现如下问题■ 绕过TPM CPU硬件限制安装方法■ 虚拟机安装win11 ■ 下载iso文件选择Windows11 （multi-edition ISO）在选择中文 ■ 右键文件点击装载出现如下问题 ■ 绕过T…...

编程日记 2024/1/9 5:28:55

k8s的yaml文件中的kind类型都有哪些？（清单版本）

在操作kubernetes的过程中，我们接触到的yaml文件中的kind类型有很多。他们代表了kubernetes的不同类型的对象，了解了kind的类型，也就相当于了解了k8s都有哪些类型的对象。类型清单及概要说明序号类型简述1Pod一个Kubernetes中最基本的资源…...

编程日记 2024/1/9 5:25:51

Jetpack Room使用

Room使用回顾数据库有多张表，一张表只能记录一种Class，Class的具体属性是这个表的列；所有对表的操作都要通过Dao来访问注解说明： Enity 作用于Class上，表示创建一张表记录该Class，Class内部属性使用…...

编程日记 2024/1/9 5:24:50

HarmonyOS应用开发之ArkTS语言学习记录

1、ArkTS介绍 ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者…...

编程日记 2024/1/9 5:23:49

windows 下 mongodb6.0 导入导出json文件

1.运行cmd窗口，进入MongoDB安装路径下的bin文件下，输入以下命令导入数据文件 mongoimport --host 127.0.0.1 --port 27017 --db <数据库名称，根据自个情况> -c <集合名称，自定义> --file <导入文件的路径名> …...

编程日记 2024/1/9 5:22:48

如何给 unplugin-vue-components/vite 写一个简单的 resolver

大部分工作 unplugin-vue-components 都已经处理好了, 我们只需要接收组件名来判断是否是自己的组件, 然后处理对应的导入逻辑。一共 3 个字段 as 重命名类似 import { componentNameReName } from ‘xxxx’name 组件名 import { componentName } from ‘xxxx’from 导入路径…...

编程日记 2024/1/9 5:21:47

MYSQL篇--索引高频面试题

mysql索引 1什么是索引？ 索引说白了就是一种数据结构，可以协助快速查询数据，以及更新数据库表中的数据，更通俗的来说索引其实就是目录，通过对数据建立索引形成目录，便于去查询数据，而mysql索引…...

编程日记 2024/1/9 5:20:46

视频号小店怎么上架商品？实操分享，干货满满！

我是电商珠珠视频号小店从22年7月到现在也不过才发展了一年，它的风口才刚刚开始。平台为了吸引商家入驻，会将大量红利向商家倾斜，只要把握住风口，就会很快起飞。视频号小店对于很多人来说，都是新平台&#xff0c…...

编程日记 2024/1/9 5:18:45

Python 常用数据类型

Python 常用数据类型有以下这些： 数据类型中文解析例子int整数，表示整数值1、2float浮点数，表示带有小数点的数值3.14、2.718complex复数，表示实部和虚部组成的复数12j、3-4jstr字符串，表示文本数据，用引号…...

编程日记 2024/1/9 5:16:43

基于yolov2深度学习网络的车辆行人检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022a 3.部分核心程序 .......................................................... load yolov2.mat% 加载训练好的…...

编程日记 2024/1/9 5:15:42

【QT】中英文切换

很高兴在雪易的CSDN遇见你前言本文分享QT中如何进行中英文切换，希望对各位小伙伴有所帮助！ 感谢各位小伙伴的点赞关注，小易会继续努力分享，一起进步！ 你的点赞就是我的动力(＾Ｕ&#xff3e…...

编程日记 2024/1/9 5:14:41

vue实现代码编辑器,无坑使用CodeMirror

vue实现代码编辑器,无坑使用CodeMirror vue实现代码编辑器,使用codemirror5 坑：本打算cv一下网上的，结果发现网上的博客教程都是错的，而且博客已经是几年前的了，我重新看了github上的，发现安装的命令都已经不一样了。我…...

编程日记 2024/1/9 5:11:39

MR实战：网址去重

文章目录一、实战概述二、提出任务三、完成任务（一）准备数据1、在虚拟机上创建文本文件2、上传文件到HDFS指定目录 （二）实现步骤1、创建Maven项目2、添加相关依赖3、创建日志属性文件4、创建网址去重映射器类5、创建网址去重归并…...

编程日记 2024/1/9 5:10:37

一、配置默认配置 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- omap2plus_defconfig原配置 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- oldconfig 重新配置 make ARCHarm CROSS_COMPILEarm-linux-gnueabihf- menuconfig二 kernel zImage make ARCHarm CRO…...

编程日记 2024/1/9 5:09:36

hash基础知识（算法村第五关青铜挑战）

一、Hash的概念和基本特征哈希(Hash)也称为散列，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，这个输出值就是散列值。二、碰撞处理方法(2种) 在上面的例子中，我们发现有些在Hsh中很多位置可能要存两个甚…...

编程日记 2024/1/9 5:07:35

Linux第8步_USB设置

学习完设置“虚拟机的电源”后，接着学习通过鼠标点击操作U盘，目的是了解USB设置。 1、在桌面，双击“VMware Workstation Pro”图标，得到下图： 2、点击“编辑虚拟机”，得到下图： 只要点击编辑虚…...

编程日记 2024/1/9 5:05:33

第五节强制规范commit提交 .husky/commit-msg: no-such file or directory问题解决办法

系列文章目录目录系列文章目录前言操作方法总结前言在每次Git提交时，强制严格执行制定的规范。操作方法 npm 安装commitlist 进行校验 npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12...

编程日记 2024/1/9 5:04:32