今天在做节流操作时,无意间看到可以用css动画去实现节流效果,然后一顿操作发现果然可以,记录一下
一、 用css中的pointer-events(指针事件)、animation(动画)以及:active
对点击事件进行限制,也就是禁用点击事件,利用pointer-events pointer-events 属性用于设置元素是否对鼠标事件做出反应。 值:none 不做反应auto 默认值 利用动画animation,去改变当前按钮是否可点击 利用伪类 :active 触发按钮时机,就是点击行为
例如:实现按钮节流,利用css动画的控制,比如一个动画控制按钮从禁用–>可点击的变化,每次点击都让动画重新执行一次,就能达到节流的效果
<! DOCTYPE html >
< html lang = " en" >
< head>
< meta charset = " UTF-8" />
< meta http-equiv = " X-UA-Compatible" content = " IE=edge" />
< meta name = " viewport" content = " width=device-width, initial-scale=1.0" />
< title> css动画实现节流效果</ title>
< style>
@keyframes throttle {
from {
color : red;
pointer-events : none;
}
to {
color : green;
pointer-events : all;
}
}
button {
animation : throttle 2s step-end forwards;
}
button:active {
animation : none;
}
</ style>
</ head>
< body>
< button onclick = " fn ( ) " > 普通按钮</ button>
< script>
function fn ( ) {
console. log ( "1111" ) ;
}
</ script>
</ body>
</ html>