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

  }

}

巴特西

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

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

template 部分

javascript 部分

css 部分

最新文章

热门文章

巴特西

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

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

template 部分

javascript 部分

css 部分

最新文章

热门文章

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