最近在做排位赛的ui,很多页面存在一些表单提交，常规使用直接js(disabled、防抖和节流)就可以实现。后面发现单纯的css就可以实现，而且操作很简单，只需要用上部分css(pointer-events、animation以及:active)就可以实现

1、原理：

• pointer-events：主要是用来控制鼠标事件，none元素是不会成为鼠标事件
• animation：防止重复提交，主要是一段时间后可以再重新触发，可以通过动画时长去限制
• steps：可以使用steps让动画按照阶段实现
• :active：用户激活的元素后，去更改animation的状态

2、例子：

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

3、参考资料：

pointer-events、animation、:active animation steps step、 How to Use steps() in CSS Animations、 steps案列