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

技术标签： css

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

一、 css 实现思路（需要用到 pointer-events、animation以及:active）

对点击事件进行限制，也就是禁用点击事件，利用pointer-events

pointer-events 属性用于设置元素是否对鼠标事件做出反应。
值：none 不做反应auto 默认值

利用动画animation，去改变当前按钮是否可点击
利用伪类 :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层面去绕开

觉得可以点个赞呗。。。
如有什么问题，欢迎评论区留言，感谢各位大佬指点

本文链接：https://blog.csdn.net/D_Z_Yong/article/details/127882272

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

C# 基于GDAL读取影像数据并用四叉树存储_c# gdal获取影像有效范围-程序员宅基地

文章浏览阅读849次。原谅，这是刚开始学C#学的代码，所以比较凌乱，但是是可以运行的using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Windows..._c# gdal获取影像有效范围

x264 交叉编译 iMX6 contex-A9 arm-poky 一些坑-程序员宅基地

文章浏览阅读201次。最近处理一个新板子移植问题，移植第三方库，例如x264，碰到奇怪问题。这款板子是新拿到的，据说性价比比较高，因此需要进行方案验证按道理，大点第三方库兼容性都做的不错，特别类似x264这样的。但ARM芯片不给力，导致有许多问题，也折腾了很久，现在总算搞明白来龙去脉，MARK下：一般来说，考虑到 configure 命令比较长，我们会建立一个批处理文件(比如：install.sh)，并将需要命..._unrecognized option '-stack_alignment=16

成为 Java 高级程序员需要掌握哪些？-程序员宅基地

文章浏览阅读1.5k次，点赞2次，收藏4次。Section 1 Core Java，就是 Java 基础、JDK 的类库，很多童鞋都会说，JDK 我懂，但是懂还不足够，知其然还要知其所以然，JDK 的源代码写的非常好，要经常查看，对使用频繁的类，比如 String，集合类（List，Map，Set）等数据结构要知道它们的实现..._10年java软件开发工程师适合看什么技术

c语言实现文件移动\复制\重命名\删除等函数_c语言 copy 文件 api movefile-程序员宅基地

文章浏览阅读7.6k次。1.复制文件，定义与调用用例BOOL WINAPI CopyFile( __in LPCTSTR lpExistingFileName, __in LPCTSTR lpNewFileName, __in BOOL bFailIfExists);//CopyFile(srcfilepath, dstfilepath, 0_c语言 copy 文件 api movefile

SAP-ABAP-小计收起/折叠明细项目-只显示小计内容_sap小计折叠-程序员宅基地

文章浏览阅读1.5k次。单个小计收起明细：报表数据->合计->按照维度小计->点击小计维度字段（折叠所选内容）或者点击合计字段左侧小点。所有小计收起明细：报表数据->合计->按照维度小计->小计->下钻总计级别->选择对应级别->回车 ..._sap小计折叠

IIS7应用程序池停止后，如何自动启动_iis 应用程序自动启动-程序员宅基地

文章浏览阅读1.6k次。我的环境：win2008R2 64位+IIS7.0从windows事件里找到错误原因：应用程序池“abc”将被自动禁用，原因是为此应用程序池提供服务的进程中出现一系列错误。这个应用程序池停止后，它就无法自动启动了，导致网站出现503错误网上搜索千篇一律的解决办法是：给IIS Admin Service添加NetWork Service用户权限（本地启动、本地激活）这种说法并不完..._iis 应用程序自动启动

随便推点

vue打开新页面_this.$router.resolve({ name: "pdf", query: {pdf : -程序员宅基地

文章浏览阅读143次。const routeData = this.$router.resolve({ name: 'index', query: { // } }) window.open(routeData.href, '_blank')_this.$router.resolve({ name: "pdf", query: {pdf : pdfurl } } );

Drools规则描述语言快速手册_drl语言-程序员宅基地

文章浏览阅读721次。在规则引擎中，通常会使用某种表述性的语言（而不是编程语言）来描述规则。所以规则描述语言也是规则引擎的一个重要组成部分。目前在规则描述语言方面，并没有一个通用的标准获得规则引擎厂商的广泛支持，大部分规则描述语言都是厂商私有的。大体来说，规则语言可以分为结构化的（Structured)和基于标记的（Markup，通常为xml）。常见的规则描述语言包括：srl(Structured Rule Language) : Fair Isaac（以前是Blaze Software）定义的结构化规则描述语言_drl语言

Apache----windows下虚拟主机和虚拟目录的认识（Apache配置）_虚拟目录和虚拟主机-程序员宅基地

文章浏览阅读4.7k次，点赞3次，收藏3次。【指导老师】王津 CTO 天津千行时线科技有限公司1 前言虚拟主机和虚拟目录的用处和区别很大，需要一番深究。在windows/Linux/Mac上配置也有差异。区别这两个东西，是为了更方便的发布和部署你的项目！！！虚拟目录，你在发布的时候，会多一个project目录，去不掉，工程项目过大的时候。虚拟主机，直接是域名+index.php首页，方便发_虚拟目录和虚拟主机

Spring4笔记----工厂方法配置bean_spring4 工厂方法注入bean-程序员宅基地

文章浏览阅读333次。(1)静态工厂方法调用静态工厂方法创建 Bean是将对象创建的过程封装到静态方法中.当客户端需要对象时,只需要简单地调用静态方法,而不同关心创建对象的细节.要声明通过静态方法创建的 Bean, 需要在Bean 的class 属性里指定拥有该工厂的方法的类,同时在 factory-method属性里指定工厂方法的名称.最后, 使用元素为该方法传递_spring4 工厂方法注入bean

公布Windows版Flutter_flutter windows ui-程序员宅基地

文章浏览阅读639次。公布Windows版Flutter构建高质量的Windows应用程序，并在移动和web上运行自从我们推出Flutter以来，我们一直专注于提供一个跨平台的解决方案，以获得漂亮的、定制的应用程序，这些应用程序被编译为机器代码，并充分利用您的设备的底层图形硬件。今天是这一愿景的重大扩展，我们首次发布了对Windows作为应用目标的支持，使Windows开发者能够受益于移动开发者所享有的同样的生产力和力量。我们在Flutter上的目标是为您提供构建良好体验所需的工具，无论您在哪个操作系统上构建。因此，我们_flutter windows ui

MSB8003: 未定义 WindowsSDKDir 属性_msb800未定义windows sdkir属性-程序员宅基地

文章浏览阅读5.7k次。warning MSB8003: 未定义 WindowsSDKDir 属性。可能找不到某些生成工具。可能找不到某些生成工具。VS三大版本的对比分析VS运行出错用Visual Studio Installer 修复一遍就行了安装问题，修复一下，，社区版的应该没什么大问题。Visual Studio Community毕竟嘛，社区版，也可以理解为个人版。适用于学生、开源和个人等等。一些新手用来学习是个不错的选择。该版本有相对完备的免费IDE。可用于开发 Android、iOS、Windows 和_msb800未定义windows sdkir属性