css 实现 防抖效果

一 . 什么是防抖 ?

1 . 在间隔时间内,多次触发,只识别最后一次 !
  + 使用场景: input 输入  鼠标移动  窗口滚动等等事假

2 . css 防抖相比js防抖的优势 ?

+ 更轻量 不依赖框架  

3 . 实现思路

1. 多次触发才叫防抖,假如可以使用css对其限制,是不是可以实现?,所以想到了  禁用事件的一个属性  `pointer-events`
2. 间隔时间的处理,每次触发都要使其禁用300ms,时间过后重置, 有什么属性跟时间和状态的恢复有关呢? 没错 动画的 `animation` 属性
3. 如何触发? 想到了 css 的一个伪类 `:active`  :active 的效果是 向活动的链接添加特殊的样式,当你点击一个链接时它变成活动链接。

4 . css 组合实现css防抖效果

+ 实现步骤 :
  + 给要实现的元素绑定 伪类 :active并 将 动画属性 animation 设置为 none;
  + 设置动画效果 通过 @keyframes 变量名+ from + to 设置动画
  + 将动画 属性绑定要触发的 元素,并设置 动画: 变量名 + 触发时间 + 渐变效果 + 最后的状态
+ 注意事项:
  + 这里动画的缓动函数设置成了阶梯曲线，step-end，它可以很方便的控制pointer-events的变化时间点。
  + pointer-events在0~300ms秒内的值都是none，一旦到达300ms秒，就立刻变成了all，由于是forwards，会一直保持all的状态

5 . 实现代码

    

        
1