CSS 点击img 或者 div 增加抖动(shake)效果

一般使用场景: 登录的错误验证 或者 强提醒

template 部分

<img id="barcode" :class="{ shaking: toShake}" @click="handleShake" />

javascript 部分

export default {
  data(){
    return{
      toShake: false
    }
  },
methods:{
handleShake() {
      this.toShake= true
      // demo for next animation.
      setTimeout(() => {
        this.toShake= false
      }, 1000)
    }
  }
}

css 部分

.shaking {
  animation: shakeX 1s;
}
@keyframes shakeX {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
// 进度为10%,30%,50%,70%,90% 动画
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-0.5rem, 0, 0);
  }
// 进度为10%,30%,50%,70%,90% 动画
  20%,
  40%,
  60%,
  80% {
    transform: translate3d(0.5rem, 0, 0);
  }
}