当前位置：首页 > VUE

vue实现抖动

2026-02-10 06:35:39VUE

Vue 实现元素抖动效果

在Vue中实现抖动效果可以通过CSS动画或JavaScript库完成。以下是几种常见方法：

使用CSS关键帧动画

在Vue组件的<style>部分定义抖动动画：

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

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

在模板中绑定class：

<template>
  <div :class="{ 'shake-element': shouldShake }" @click="triggerShake">
    点击抖动
  </div>
</template>

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

使用Vue过渡动画

结合Vue的过渡系统实现：

<template>
  <transition name="shake">
    <div v-if="show" @click="shake">抖动元素</div>
  </transition>
</template>

<style>
.shake-enter-active {
  animation: shake 0.82s;
}
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}
</style>

使用第三方库（如GSAP）

安装GSAP：

npm install gsap

组件实现：

<template>
  <div ref="shakeTarget" @click="shake">GSAP抖动</div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  methods: {
    shake() {
      gsap.to(this.$refs.shakeTarget, {
        x: -5,
        duration: 0.05,
        repeat: 5,
        yoyo: true
      })
    }
  }
}
</script>

响应式抖动控制

通过数据驱动实现条件抖动：

vue实现抖动

<template>
  <div 
    :class="{ 'shake': hasError }"
    @animationend="hasError = false"
  >
    表单输入
  </div>
</template>

<style>
.shake {
  animation: shake 0.5s;
}
</style>

<script>
export default {
  data() {
    return {
      hasError: false
    }
  },
  watch: {
    inputValue() {
      if(!this.validate()) {
        this.hasError = true
      }
    }
  }
}
</script>

以上方法可根据实际需求选择，CSS动画适合简单场景，GSAP适合复杂动画序列，过渡系统适合与Vue生命周期结合的场景。

标签: vue