当前位置：首页 > VUE

vue实现文字抖动

2026-01-18 13:32:49VUE

实现文字抖动的几种方法

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

使用CSS关键帧动画

在Vue组件的<style>部分添加关键帧动画：

.shake-text {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

在模板中使用：

vue实现文字抖动

<template>
  <div class="shake-text">抖动的文字</div>
</template>

使用Vue的过渡和动画

结合Vue的过渡系统实现更复杂的控制：

<template>
  <transition name="shake">
    <div v-if="showText">抖动的文字</div>
  </transition>
</template>

<style>
.shake-enter-active {
  animation: shake 0.5s;
}
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}
</style>

使用第三方动画库

安装animate.css库：

vue实现文字抖动

npm install animate.css

在Vue中使用：

import 'animate.css';

<template>
  <div class="animate__animated animate__shakeX animate__infinite">
    抖动的文字
  </div>
</template>

响应式抖动效果

通过数据绑定控制抖动效果：

<template>
  <div :class="{ 'shake-text': shouldShake }">抖动的文字</div>
  <button @click="toggleShake">切换抖动</button>
</template>

<script>
export default {
  data() {
    return {
      shouldShake: false
    }
  },
  methods: {
    toggleShake() {
      this.shouldShake = !this.shouldShake
    }
  }
}
</script>

更复杂的抖动模式

创建自定义抖动模式：

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

@keyframes custom-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

这些方法可以根据项目需求选择使用，CSS动画适合简单效果，而第三方库提供了更多预设动画选项。