当前位置：首页 > VUE

vue实现红包跳动

2026-01-17 05:36:03VUE

Vue 实现红包跳动效果

红包跳动效果可以通过 CSS 动画和 Vue 的动态绑定实现。以下是具体实现方法：

动画基础实现

定义红包跳动的 CSS 关键帧动画：

vue实现红包跳动

@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.red-packet {
  width: 100px;
  height: 120px;
  background-color: #e74c3c;
  border-radius: 5px;
  position: relative;
  animation: jump 0.5s infinite alternate;
}

Vue 组件实现

创建 Vue 组件并绑定动画：

vue实现红包跳动

<template>
  <div class="red-packet-container">
    <div 
      v-for="(packet, index) in packets" 
      :key="index"
      class="red-packet"
      :style="{
        left: `${packet.position.x}px`,
        top: `${packet.position.y}px`,
        animationDelay: `${index * 0.1}s`
      }"
      @click="collectPacket(index)"
    >
      <span class="money">¥{{ packet.amount }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      packets: [
        { amount: 5, position: { x: 50, y: 100 }, collected: false },
        { amount: 10, position: { x: 150, y: 200 }, collected: false },
        { amount: 20, position: { x: 250, y: 150 }, collected: false }
      ]
    }
  },
  methods: {
    collectPacket(index) {
      if (!this.packets[index].collected) {
        this.packets[index].collected = true;
        // 这里可以添加收集动画或其他逻辑
      }
    }
  }
}
</script>

<style>
.red-packet-container {
  position: relative;
  width: 100%;
  height: 300px;
}

.red-packet {
  position: absolute;
  width: 60px;
  height: 80px;
  background-color: #e74c3c;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  animation: jump 0.5s infinite alternate;
}

.money {
  color: gold;
  font-weight: bold;
  font-size: 16px;
}
</style>

进阶效果优化

添加随机位置和大小：

generatePackets(count) {
  const packets = [];
  for (let i = 0; i < count; i++) {
    packets.push({
      amount: Math.floor(Math.random() * 50) + 1,
      position: {
        x: Math.random() * (window.innerWidth - 100),
        y: Math.random() * (window.innerHeight - 150)
      },
      size: Math.random() * 0.5 + 0.8,
      collected: false
    });
  }
  return packets;
}

添加收集动画：

@keyframes collect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

.collected {
  animation: collect 0.5s forwards !important;
}