css 动画实现节流效果

今天在做节流操作时,无意间看到可以用css动画去实现节流效果,然后一顿操作发现果然可以,记录一下

CSS pointer-events 属性

css 动画实现节流效果_第1张图片

一、 用css中的pointer-events(指针事件)、animation(动画)以及:active

  • 对点击事件进行限制,也就是禁用点击事件,利用pointer-events
    pointer-events 属性用于设置元素是否对鼠标事件做出反应。
    值:none 不做反应auto 默认值
  • 利用动画animation,去改变当前按钮是否可点击
  • 利用伪类 :active 触发按钮时机,就是点击行为

例如:实现按钮节流,利用css动画的控制,比如一个动画控制按钮从禁用–>可点击的变化,每次点击都让动画重新执行一次,就能达到节流的效果

css 动画实现节流效果_第2张图片

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{/* 设置2秒时间间隔 */
        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>

你可能感兴趣的:(css,css,前端)