当前位置：首页 > VUE

vue实现文字抖动

2026-02-19 05:57:51VUE

Vue 实现文字抖动效果

在 Vue 中实现文字抖动效果可以通过 CSS 动画或 JavaScript 动态控制样式。以下是几种实现方法：

使用 CSS 动画

定义关键帧动画并应用到文本元素上：

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

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

在 Vue 模板中使用：

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

动态控制 CSS 类

通过 Vue 的响应式特性动态添加/移除抖动类：

<template>
  <div :class="{ 'shake-text': isShaking }">点击抖动</div>
  <button @click="toggleShake">切换抖动</button>
</template>

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

使用第三方动画库

安装 animate.css 库：

npm install animate.css

在 Vue 项目中引入并使用：

<template>
  <div class="animate__animated animate__shakeX animate__infinite">专业抖动效果</div>
</template>

<script>
import 'animate.css'
export default {}
</script>

自定义 JavaScript 实现

通过 ref 操作 DOM 实现更复杂的抖动：

vue实现文字抖动

<template>
  <div ref="shakingText" @click="startShake">点击开始抖动</div>
</template>

<script>
export default {
  methods: {
    startShake() {
      const element = this.$refs.shakingText
      let position = 0
      const interval = setInterval(() => {
        position = position === 0 ? 5 : -5
        element.style.transform = `translateX(${position}px)`
      }, 50)

      setTimeout(() => {
        clearInterval(interval)
        element.style.transform = 'translateX(0)'
      }, 1000)
    }
  }
}
</script>

这些方法可以根据实际需求选择使用，CSS 动画方案性能更好，JavaScript 方案控制更灵活。