按钮抖动动画效果

在作需求时要尽量未雨绸缪,按钮触发等操作不仅要考虑防抖,接口返回状态loading状态防止重复点击等,还要发挥前端优势,尽力让用户使用起来舒适。

<template>
    <el-button :class="{'shake':shakeFlag}" type="primary" @click="submite">抖动</el-button>
</template>

<script>
  methods: {
    
    
    submite(){
    
    
      this.shakeFlag = true;
      setTimeout(()=>{
    
    
        this.shakeFlag=false;
      },820);
      return
    },
   }
</script>

<style lang="scss">
.shake{
    
    
  animation: shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both;
}
</style>

猜你喜欢

转载自blog.csdn.net/Beatingworldline/article/details/127111206