在作需求时要尽量未雨绸缪,按钮触发等操作不仅要考虑防抖,接口返回状态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>