vue实现动态高度抖动

Vue 实现动态高度抖动效果

动态高度抖动效果可以通过 CSS 动画和 Vue 的数据绑定结合实现。以下是几种实现方式：

使用 CSS 关键帧动画

定义关键帧动画，通过 Vue 动态绑定样式触发抖动：

<template>
  <div 
    class="shake-box" 
    :style="{ height: currentHeight + 'px' }"
    @click="startShake"
  ></div>
</template>

<script>
export default {
  data() {
    return {
      currentHeight: 100,
      isShaking: false
    }
  },
  methods: {
    startShake() {
      if (this.isShaking) return
      this.isShaking = true

      const originalHeight = this.currentHeight
      const shakeCount = 10
      let count = 0

      const shakeInterval = setInterval(() => {
        this.currentHeight = originalHeight + Math.random() * 20 - 10
        count++

        if (count >= shakeCount) {
          clearInterval(shakeInterval)
          this.currentHeight = originalHeight
          this.isShaking = false
        }
      }, 50)
    }
  }
}
</script>

<style>
.shake-box {
  width: 200px;
  background-color: #42b983;
  transition: height 0.05s ease-out;
}
</style>

使用 GSAP 动画库

GSAP 提供更强大的动画控制能力：

<template>
  <div ref="shakeElement" class="shake-box"></div>
  <button @click="triggerShake">触发抖动</button>
</template>

<script>
import { gsap } from 'gsap'

export default {
  methods: {
    triggerShake() {
      const el = this.$refs.shakeElement
      const originalHeight = 100

      gsap.to(el, {
        height: () => originalHeight + Math.random() * 30 - 15,
        duration: 0.05,
        repeat: 10,
        yoyo: true,
        onComplete: () => {
          gsap.to(el, { height: originalHeight, duration: 0.1 })
        }
      })
    }
  }
}
</script>

使用 CSS transform 实现视觉抖动

如果不需要实际改变元素高度，可以使用 transform 实现视觉抖动效果：

<template>
  <div 
    class="shake-transform" 
    :class="{ 'shake-active': isShaking }"
    @click="toggleShake"
  ></div>
</template>

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

<style>
.shake-transform {
  width: 200px;
  height: 100px;
  background-color: #42b983;
  transition: transform 0.1s;
}

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

@keyframes shake {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(-10px); }
  40% { transform: translateY(8px); }
  60% { transform: translateY(-6px); }
  80% { transform: translateY(4px); }
}
</style>

响应式高度抖动

结合 Vue 的响应式特性和 requestAnimationFrame 实现平滑抖动：

<template>
  <div 
    ref="shakeBox" 
    class="responsive-shake" 
    :style="{ height: height + 'px' }"
  ></div>
  <button @click="startResponsiveShake">开始抖动</button>
</template>

<script>
export default {
  data() {
    return {
      height: 100,
      animationId: null
    }
  },
  methods: {
    startResponsiveShake() {
      const startTime = Date.now()
      const duration = 1000
      const originalHeight = this.height

      const animate = () => {
        const elapsed = Date.now() - startTime
        const progress = Math.min(elapsed / duration, 1)

        if (progress < 1) {
          this.height = originalHeight + Math.sin(progress * Math.PI * 10) * 15
          this.animationId = requestAnimationFrame(animate)
        } else {
          this.height = originalHeight
          cancelAnimationFrame(this.animationId)
        }
      }

      animate()
    }
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId)
  }
}
</script>

以上方法可以根据具体需求选择，CSS 动画方案性能较好，GSAP 提供更精细的控制，而 requestAnimationFrame 方案则适合需要与其它动画同步的场景。