当前位置：首页 > VUE

vue实现抖动样式

2026-02-17 16:06:13VUE

实现抖动效果的CSS方法

在Vue中实现抖动效果，可以通过CSS动画或关键帧来实现。定义一个抖动动画的关键帧：

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

.shake {
  animation: shake 0.5s ease-in-out;
}

Vue组件中使用抖动样式

在Vue模板中，通过动态绑定class来触发抖动效果：

vue实现抖动样式

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

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

使用第三方库实现高级抖动

安装vue-shake库可以快速实现更复杂的抖动效果：

vue实现抖动样式

npm install vue-shake

在组件中使用：

<template>
  <shake>
    <div>这个元素会持续抖动</div>
  </shake>
</template>

<script>
import { Shake } from 'vue-shake'

export default {
  components: {
    Shake
  }
}
</script>

自定义抖动参数

通过CSS变量可以自定义抖动幅度和持续时间：

.shake-custom {
  --shake-intensity: 8px;
  --shake-duration: 0.8s;
  animation: shake var(--shake-duration) ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(calc(-1 * var(--shake-intensity))); }
  75% { transform: translateX(var(--shake-intensity)); }
}