vue实现文字抖动
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 实现更复杂的抖动：
<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 方案控制更灵活。
