当前位置：首页 > VUE

vue实现抖动

2026-03-27 16:04:44VUE

Vue 实现抖动效果的方法

抖动效果可以通过 CSS 动画或 JavaScript 实现。以下是几种常见的实现方式：

使用 CSS 动画

在 Vue 组件的样式部分定义抖动动画：

.shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

在模板中通过动态类名控制抖动：

vue实现抖动

<template>
  <div :class="{ shake: isShaking }" @click="shake">
    点击抖动
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShaking: false
    }
  },
  methods: {
    shake() {
      this.isShaking = true
      setTimeout(() => {
        this.isShaking = false
      }, 500)
    }
  }
}
</script>

使用第三方库

安装 animate.css 库：

npm install animate.css

在 Vue 中使用：

vue实现抖动

<template>
  <div 
    class="animate__animated" 
    :class="{ 'animate__headShake': isShaking }"
    @click="shake"
  >
    点击抖动
  </div>
</template>

<script>
import 'animate.css'
export default {
  data() {
    return {
      isShaking: false
    }
  },
  methods: {
    shake() {
      this.isShaking = true
      setTimeout(() => {
        this.isShaking = false
      }, 1000)
    }
  }
}
</script>

使用 JavaScript 实现

通过直接操作 DOM 元素的样式实现抖动：

<template>
  <div ref="shakeElement" @click="shake">
    点击抖动
  </div>
</template>

<script>
export default {
  methods: {
    shake() {
      const element = this.$refs.shakeElement
      let distance = 5
      let times = 10
      let interval = 50

      const shakeInterval = setInterval(() => {
        if (times-- <= 0) {
          clearInterval(shakeInterval)
          element.style.transform = 'translateX(0)'
          return
        }

        const direction = times % 2 === 0 ? -1 : 1
        element.style.transform = `translateX(${distance * direction}px)`
        distance *= 0.9
      }, interval)
    }
  }
}
</script>

注意事项