css 动画实现节流的示例代码

admin CSS

2023-12-02 0 342

1、节流原理

如果持续触发事件，每隔一段时间只执行一次函数。意思就是针对调用频率高的函数，通过设置延时，使其在执行后间隔一段时间，才允许进行下一次的函数运行，避免重复频繁的调用导致的浏览器性能以及ajax重复调用问题。之前基本上是使用JavaScript节流函数去控制，实际上css也能做到节流。以下将以按钮的点击事件来举例。

2、css 实现思路

（需要用到 pointer-events、animation以及:active）对点击事件进行限制：通过CSS pointer-events 属性，点击一次之后一定时间内禁用触发点击事件；

pointer-events 属性用于设置元素是否对鼠标事件做出反应。
css语法：pointer-events: auto|none;
设置禁止时间：通过animation
设置动画时间（点击事件禁用时间）
触发时机：通过伪类:active触发animation的动画

可以理解成是对 CSS 动画的进行控制，比如有一个动画控制按钮从禁用->可点击的变化，每次点击时让这个动画重新执行一遍，在执行的过程中，一直处于禁用状态，借此达到“节流”的效果。

3、实现代码

在button按钮上绑定点击事件

buttonClick() {
console.log("节流—–保存");
},

设置css animation动画效果，并绑定到button上

@keyframes throttle {
from {
pointer-events: none;
}
to {
pointer-events: all;
}
}
button {
animation: throttle 2s step-end forwards;
}

注意：这里动画的缓动函数设置成了阶梯曲线step-end，step-end 会使 keyframes 动画到了定义的关键帧处直接突变，并没有变化的过程，用来达到pointer-events的明显变化时间点。

pointer-events在0~2秒内的值都是none，一旦到达2秒，就立刻变成了all，由于是forwards，会一直保持all的状态。

在点击时重新执行一遍动画，只需要在按下时设置动画为none就行了

button:active{
animation: none;
}

为了更直观的看到节流效果，可以把颜色变化也加在动画里

@keyframes throttle {
from {
color: red;
pointer-events: none;
}
to {
color: green;
pointer-events: all;
}
}

4、借助 CSS 来监听事件

webkit-animation动画有三个事件：

开始事件: webkitAnimationStart
结束事件: webkitAnimationEnd
重复运动事件: webkitAnimationIteration

在本示例中，可以通过:active去触发transition变化，然后通过监听transition回调去动态设置按钮的禁用状态，实现如下

<button onclick="console.log(\’保存1\’)">测试click</button>
<button class="throttle" onclick="console.log(\’保存2\’)">节流—-css</button>

button {
user-select: none;
}
.throttle {
opacity: 0.99;
transition: opacity 2s;
}
.throttle: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;
});

这样做的最大好处是，这部分禁用的逻辑是完全和业务逻辑是解耦的，可以在任意时候，任意场合下无缝接入，也不受框架和环境影响。