节流指的避免过于频繁的执行一个函数,例如:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,不然会频繁的请求接口,之前基本上是通过js去控制节流问题,其实css也能做到节流
一、 css 实现思路(需要用到 pointer-events、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层面去绕开
到此这篇关于利用css动画实现节流的文章就介绍到这了,更多相关css 节流内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持悠久资源网!