input无内容提交显示抖动提示效果

一、效果图 

 二、代码

<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>