利用css 动画实现节流_css动画forwards-程序员宅基地

技术标签： css  

节流指的避免过于频繁的执行一个函数，例如：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，不然会频繁的请求接口，之前基本上是通过js去控制节流问题，其实css也能做到节流

一、 css 实现思路（需要用到 pointer-events、animation以及:active）
  1. 对点击事件进行限制，也就是禁用点击事件，利用pointer-events
  • pointer-events 属性用于设置元素是否对鼠标事件做出反应。
  • 值：none 不做反应auto 默认值
  1. 利用动画animation，去改变当前按钮是否可点击
  2. 利用伪类 :active 触发按钮时机，就是点击行为

作用：实现按钮节流，利用css动画的控制，比如一个动画控制按钮从禁用-》可点击的变化，每次点击都让动画重新执行一次，就能达到节流的效果

实现方式：

首先利用animation写一个禁用开启的动画

@keyframes cssThrottle {
     
  from {
    
     pointer-events: none;
  }
  to {
    
      pointer-events: all;
  }
}

其次：把动画绑定到按钮上（设置延迟3s）

button {
    
     animation: cssThrottle 3s step-end forwards;
}

animation的 相关属性

  • step-end=》 steps(1, end)

  • step-start =》 steps(1, start)
    step() 表示过度的情况
    比如steps(5, end)，表示把我们的动画分成了多少等分end表示从开始的时候就执行，最后那段被忽视，start则相反
    在这里插入图片描述
    在这里插入图片描述

  • forwards end时表示最后那一段就交给forwards处理，就是第五段

二、利用监听css的 transition 达到节流效果

通过:active去触发transition变化，然后通过监听transition回调去动态设置按钮的禁用状态

button{
    
  opacity: .99;
  transition: opacity 2s;
}
button:not(:disabled):active{
     
  opacity: 1;
  transition: 0s;
 }

然后监听transition的起始回调

// 过渡开始
document.addEventListener('transitionstart', function(ev){
    
   ev.target.disabled = true
})
// 过渡结束
document.addEventListener('transitionend', function(ev){
    
   ev.target.disabled = false 
})

注意：这两种的话，安全性不高，可以通过 ui层面去绕开

觉得可以点个赞呗。。。
如有什么问题，欢迎评论区留言，感谢各位大佬指点
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/D_Z_Yong/article/details/127882272

智能推荐

kubeadm测试部署Kubernetes记录(1)-master及dashboard部署_kebehmanba 部署master-程序员宅基地

文章浏览阅读580次。kubeadm测试部署Kubernetes实战记录一环境搭载master部署1、加载最新源，远程安装docker、kubelet 、kubeadm、kubectl环境搭载 1、操作系统：debian8虚拟机 2、节点数量：master 1 ，pod 1 3、搭载平台：openstackmaster部署1、加载最新源，远程安装docker、kubelet 、kubeadm、ku..._kebehmanba 部署master

grafana配置钉钉告警模版(一)_grafana 钉钉告警模板-程序员宅基地

文章浏览阅读1.4k次，点赞11次，收藏11次。grafana配置钉钉告警模版_grafana 钉钉告警模板

手机术语详解_k在电话号码的中文怎么说-程序员宅基地

文章浏览阅读1.5k次。1.3G 3G是Third Generation的简称，是指第三代移动通信。第一代移动通信是模拟无线网络，第二代是目前广为使用的GSM和CDMA。3G将具有更宽的带宽，其传输速度最低为384K，最高为2M，不仅能传输话音，还能传输数据，从而提供快捷、方便的无线应用，如无线接入Internet。 3G还处于试验阶段，预计2002年才能全面投入运营。从第二代移动通信向3G的过渡技术是GPRS。 2.GSM 春秋中文社区http://bbs.cqzg.cn_k在电话号码的中文怎么说

不高兴的津津（YZOJ-1052）_不高兴的津津 c语言-程序员宅基地

文章浏览阅读223次，点赞3次，收藏2次。【问题描述】津津上初中了。妈妈认为津津应该更加用功学习，所以津津除了上学之外，还要参加妈妈为她报名的各科复习班。另外每周妈妈还会送她去学习朗诵、舞蹈和钢琴。但是津津如果一天上课超过八个小时就会不高兴，而且上得越久就会越不高兴。假设津津不会因为其它事不高兴，并且她的不高兴不会持续到第二天。请你帮忙检查一下津津下周的日程安排，看看下周她会不会不高兴；如果会的话，哪天最不高兴。【输入格式】输入包括 777 行数据，分别表示周一到周日的日程安排。每行包括两个小于 101010 的非负整数，用空格隔开，分别表示_不高兴的津津 c语言

matplotlib中绘图常用函数_matplotlib函数-程序员宅基地

文章浏览阅读1.8w次，点赞23次，收藏158次。matplotlib中常用函数散点图 柱状图 等高线 matplotlib绘制3D图 子图像 动态图 常见设置 一、设置坐标轴 # x轴和y轴的值域plt.xlim((-1,2))plt.ylim((-2,3))# color为线的颜色，linewidth为线宽度，linestyle为样式（-为实线，--为虚线）plt.plot(x,y,color='red',..._matplotlib函数

linux退出pdf阅读,Ubuntu/Linux 下pdf阅读器Zathura(类vim操作)-程序员宅基地

文章浏览阅读261次。框架 Onboard-引导页样式制作库设置背景图片或者背景movie,然后在它们之上生成数个ViewController,默认是顶部一张图片,下面是标题和详细介绍,最下面是按钮和pagegithub地址https://github.c ...jquery的工具方法isFunction/isArray/isWindow/isNumeric&..._zathura 图形

随便推点

【STM32】GPIO输入-程序员宅基地

文章浏览阅读1.2k次，点赞16次，收藏20次。红外接收管等）的电阻会随外界模拟量的变化而变化，通过与定值电阻分压即可得到模拟电压输出，再通过电压比较器进行二值化即可得到数字电压输出。按键抖动：由于按键内部使用的是机械式弹簧片来进行通断的，所以在按下和松手的瞬间会伴随有一连串的抖动。当按键按下时，PA0被下拉到GND，此时读取PAO口的电压就是低电平；第一张图，当K1按下，PA0被下拉到GND，此时读取PAO口的电压就是低电平；当K1松开，PA0被悬空，引脚的电压不确定，此时必须要求PA0是。按键：常见的输入设备，按下导通，松手断开。

数据库varchar与char的区别-程序员宅基地

文章浏览阅读205次。在数据库中，VARCHAR和CHAR是用来存储文本数据类型的。VARCHAR是一种可变长度的字符类型，它允许存储长度可变的字符串，但最大长度是固定的，例如VARCHAR(255)，表示可以存储最长为255个字符的字符串。VARCHAR在存储短字符串时可以更节省空间，但对于存储大量长度不一的数据，VARCHAR所占用的空间会比CHAR少。而CHAR是一种固定长度的字符类型，它需要预先定义最大长度..._数据库中char和varchar

使用pandas的read_excel报错：ImportError: Missing optional dependency ‘xlrd‘. Install xlrd ＞= 1.0.0 for Exc_pandas读取xlsxmissing optional dependency 'xlrd'. in-程序员宅基地

文章浏览阅读2.5k次。问题：import pandas as pddf = pd.read_excel('需求.xlsx')df.head()报错：ImportError: Missing optional dependency 'xlrd'. Install xlrd >= 1.0.0 for Excel support Use pip or conda to install xlrd.解决方法：安装xlrd_pandas读取xlsxmissing optional dependency 'xlrd'. install xlrd >= 1.0.0 for

python安装lap_Python无法安装Box2Dswig.exe文件失败,错误代码为1-程序员宅基地

文章浏览阅读733次。我试图在python上安装Box2D,但得到错误日志:C:\>pip3 install Box2DCollecting Box2DUsing cached https://files.pythonhosted.org/packages/cc/7b/ddb96fea1fa5b24f8929714ef483f64c33e9649e7aae066e5f5023ea426a/Box2D-2.3.2...._python lap安装失败

找工作笔试面试那些事儿(17)---linux测试题_user.txt 存储用户列表 tab.txt存储表名和用户模版 根据这两个文件,将对应用户和-程序员宅基地

文章浏览阅读1.5w次，点赞2次，收藏40次。作者：寒小阳时间：2013年9月。出处：http://blog.csdn.net/han_xiaoyang/article/details/11400719。声明：版权所有，转载请注明出处，谢谢。 在对linux基本知识的归纳总结之后，这里是一份linux的测试题。希望能帮助大家复习和熟悉linux知识。一、选择题1.cron 后台常驻程序 (daemon) 用_user.txt 存储用户列表 tab.txt存储表名和用户模版 根据这两个文件,将对应用户和

iOS开发之苹果应用6.1日起需兼容IPv6，那么作为开发者我们需要做些什么呢？【科普IPV6】_软件支持ipv6要做哪些工作-程序员宅基地

文章浏览阅读7k次。我相信现在很多的iOS开发者都知道苹果要求我们提交到App Store的应用必须支持IPv6。 1.提到IPV6相关。 那这个直接就联想到就是关于我们App中网络部的一些内容，是否要进行相应的改变。 首先，解释下什么是ipv6？ IPv6是下一代互联网的协议，它的提出最初是因为随着互联网的迅速发展，IPv4定义的有限地址空_软件支持ipv6要做哪些工作

推荐文章

热门文章

相关标签