CSS实现防止按钮重复点击，双击进入两次单机的情况

前言

之前有文章写过 如何避免双击进入两次单机 的情况，当然你也可以通过节流来实现，实现的方案很多，今天主要介绍一下如何通过 css 来实现，也就是 css 来实现按钮节流。

实现思路

我们可以用 pointer-events 或者 disabled 等方式，对按钮进行节流，如何操作呢？

实现方案

pointer-events 加 css 的动画来控制，也就是动画时长时间内只能点击一次，代码如下：

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

解释：这里动画的缓动函数设置成了阶梯曲线，step-end，它可以很方便的控制 pointer-events 的变化时间点。pointer-events 在 0~2 秒内的值都是 none，一旦到达 2 秒，就立刻变成了 all，由于是 forwards，会一直保持 all 的状态。

思路延展

其实，根据这个，我们有很多按钮动画特性可以实现，特别是利用 active

:root{--primary-color: royalblue;}
.button{
  padding: 5px 16px;
  color: #000000d9;
  border: 1px solid #d9d9d9;
  background-color: transparent;
  border-radius: 2px;
  line-height: 1.4;
  box-shadow: 0 2px #00000004;
  cursor: pointer;
  transition: .3s;
}
.button:hover{color: var(--primary-color);
  border-color: currentColor;
}

.button::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0.4;
  transition: .3s;
}

假如我们通过如下方式触发动画的话

.button:active::after{box-shadow: 0 0 0 6px var(--primary-color);
  opacity: 0;
}

发现动画出现了，可能抬起之后瞬间结束，比较生硬。
那时因为:active。:active 只有在鼠标按下时才会起作用，通常在点击一个按钮时，都是轻轻地点击，而不是长按，如果在:active 上添加动画，那么在鼠标抬起的时候，动画一般都没有结束，所以会导致在鼠标抬起的时候，动画马上就停止了，如果是 transition，还会有一个“回退”的过渡效果。

所以改进如下：

.button::after{
  /* 其他样式 */
  opacity: 0;
  box-shadow: 0 0 0 6px var(--primary-color);
  transition: .3s;
}
/* 点击 */
.button:active::after{
  box-shadow: none;
  opacity: 0.4;
  transition: 0s; /* 取消过渡 */
}

这样就比较完美，我们可以再 active 的时候取消动画。和上面节流的原理一样。

小结

本文，除了 css 控制点击节流之外，css 按钮动画，添加动画的时候，我们给按钮添加一个动画，

.button{animation: 动画名字 1s;}

我们可以通过 active 控制结束动画，例如：

.button:active{animation: none;}

这样就可以实现比较好看的点击动画效果。