页面实现指定盒子模块抖动特效

页面实现指定盒子模块抖动特效，以vue为例实现输入框或者按钮点击后出现抖动效果

tips: 可以用来输入框必填空值或者输入内容错误时，报警告提示抖动效果

<template>
  <div id="app">
    <button :class="{ 'apply-shake': shake }" @click="shakeAnimation()">
      点击按钮触发抖动
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shake: false,
    };
  },
  methods: {
    shakeAnimation() {
      this.shake = true;
      setTimeout(() => {
        this.shake = false;
      }, 820); // 动画持续时间为0.82s
    },
  },
};
</script>

<style>
@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;
}
</style>