vue实现抖动样式

实现抖动效果的CSS方法

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

CSS关键帧动画 定义@keyframes实现抖动效果，通过transform: translateX()模拟水平晃动：

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

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

Vue组件中的动态绑定

通过Vue的v-bind:class动态添加/移除抖动类：

<template>
  <div 
    :class="{ shake: isShaking }"
    @click="triggerShake"
  >
    点击触发抖动
  </div>
</template>

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

使用第三方动画库

安装animate.css库可快速实现丰富动画效果：

npm install animate.css

在Vue组件中引入并使用：

import 'animate.css'

<template>
  <div 
    class="animate__animated"
    :class="{'animate__headShake': isShaking}"
    @click="isShaking = true"
    @animationend="isShaking = false"
  >
    头部抖动效果
  </div>
</template>

性能优化建议

• 优先使用transform和opacity属性实现动画，这两个属性不会触发重排
• 减少动画持续时间（通常300-500ms足够）
• 避免同时触发过多元素的动画
• 使用will-change: transform提示浏览器优化

以上方法可根据具体需求选择，CSS原生方案性能最佳，第三方库则提供更多预设动画效果。