【CSS】按钮的抖动提醒

定义一个抖动的类apply-shake

@keyframes shake { 
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
.apply-shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

然后在需要增加抖动的标签添加动态:class="{'apply-shake':shakeFlag}"，并通过shakeFlag来控制抖动的开关。

function(){
  this.shakeFlag = true
  if (that.timer) {
    clearTimeout(that.timer)
    that.timer=null
  }
  that.timer =  setTimeout(() => {
    that.shakeFlag = false
  }, 820);
}