利用css动画实现节流

  发布时间:2023-01-04 16:51:34   作者:子义间   我要评论
本文主要介绍了利用css动画实现节流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

  1. 对点击事件进行限制,也就是禁用点击事件,利用pointer-events
    1. pointer-events 属性用于设置元素是否对鼠标事件做出反应。
    2. 值:none 不做反应auto 默认值
  2. 利用动画animation,去改变当前按钮是否可点击
  3. 利用伪类 :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层面去绕开

到此这篇关于利用css动画实现节流的文章就介绍到这了,更多相关css 节流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • CSS预处理器scss/sass语法及使用教程

    scss在css基础语法上面增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,使用scss可以很方便的提高开发效率,这篇文章主
    2023-01-05
  • 利用css动画实现节流

    本文主要介绍了利用css动画实现节流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-04
  • CSS动画实现跳动的足球(疯狂世界杯)

    2022卡塔尔世界杯正在如火如荼的进行之中,作为“诸神的黄昏”,本届世界杯备受瞩目,足坛巅峰老将c罗,梅西,内马尔也将随本次世界杯退役,一代人的青春到此结束!本篇我
    2023-01-04
  • CSS样式覆盖的操作代码

    在页面中,我们常用id、class以及内联样式表来设置我们的组件CSS,在网页中css样式根据css优先级来使用,优先级高的会覆盖优先级低的css样式,本文通过实例代码给大家详细
    2023-01-03
  • css实现文字充电效果的示例代码

    本文主要介绍了css实现文字充电效果的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习
    2023-01-03
  • table不让td文字溢出操作方法

    这篇文章主要介绍了table不让td文字溢出操作方法,需要的朋友可以参考下
    2022-12-16
  • table设置超出部分隐藏,鼠标移上去显示全部内容的方法

    这篇文章主要介绍了table设置超出部分隐藏,鼠标移上去显示全部内容的实现方法,需要的朋友可以参考下
    2022-12-16
  • CSS使用SVG实现动态分布的圆环发散路径动画

    这篇文章主要介绍了CSS使用SVG实现动态分布的圆环发散路径动画,第一时间看到这个需求想到的就是 SVG 或者 Canvas,但是由于开发时可能还需要插入其他元素,所以这里还是希
    2022-10-27
  • CSS中理解层叠性及权重如何分配

    这篇文章主要介绍了CSS中理解层叠性及权重如何分配,CSS的三大特性,分别是层叠性、优先性和继承性,本文给大家详细讲解,对css层叠性权重相关知识感兴趣的朋友跟随小编一起
    2022-10-24
  • CSS 鼠标点击拖拽效果的实现代码

    这篇文章主要介绍了CSS 鼠标点击拖拽效果,我们还是仅仅通过 CSS,来实现一种丝滑的鼠标点击拖动元素移动的效果,本文通过实例代码效果展示给大家介绍的非常详细,对大家的
    2022-10-10

最新评论