一、效果图
![](https://i-blog.csdnimg.cn/blog_migrate/80fb77e45898ce9ce7177480ff470e53.gif)
二、代码
<template>
<div>
<div style="width:20vw; margin:80px auto 0px auto">
<el-input v-model="name" :class="{'applyShake': shakeInput}"
placeholder="请输入内容"></el-input>
<div style="text-align:centen; margin-top:20px">
<el-button type="primary" @click="handleSumbit">确定</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
name:'',
shakeInput:false,
}
},
methods:{
handleSumbit(){
if(!this.name){
this.shakeInput = true;
setTimeout(() => {
this.shakeInput = false;
},820);
return;
}
this.$message('提交成功')
},
}
}
</script>
<style scoped >
.applyShake{
animation: shake 0.82s cubic-bezier(0.36,0.07,0.19,0.97) both;
}
@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);
}
}
</style>