公告:携程集团2022年秋季校园招聘会内推!!

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

916次浏览

前言

之前有文章写过如何避免双击进入两次单机的情况,当然你也可以通过节流来实现,实现的方案很多,今天主要介绍一下如何通过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;
}

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

Tags: csscss节流

相关文章: