vue实现红包跳动

实现红包跳动效果的思路

使用Vue结合CSS动画可以实现红包跳动效果，核心是通过关键帧动画控制红包元素的上下移动和旋转。

关键代码实现

模板部分

<template>
  <div class="red-packet-container">
    <div 
      class="red-packet" 
      :style="{ animationDelay: `${index * 0.2}s` }"
      v-for="(packet, index) in packets" 
      :key="index"
      @click="handleClick(packet)"
    >
      <div class="envelope"></div>
      <div class="money">{{ packet.amount }}元</div>
    </div>
  </div>
</template>

脚本部分

<script>
export default {
  data() {
    return {
      packets: [
        { id: 1, amount: 5 },
        { id: 2, amount: 10 },
        { id: 3, amount: 20 }
      ]
    }
  },
  methods: {
    handleClick(packet) {
      console.log('领取红包:', packet.amount)
    }
  }
}
</script>

样式部分

<style>
.red-packet-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 50px;
}

.red-packet {
  position: relative;
  width: 100px;
  height: 120px;
  animation: jump 1s infinite alternate;
  cursor: pointer;
}

.envelope {
  width: 100%;
  height: 100%;
  background-color: #e74c3c;
  border-radius: 5px;
  position: relative;
}

.money {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  text-align: center;
  color: #f1c40f;
  font-weight: bold;
}

@keyframes jump {
  0% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-20px) rotate(0deg);
  }
  100% {
    transform: translateY(0) rotate(5deg);
  }
}
</style>

效果优化建议

1. 为红包添加阴影增强立体感

   

   .red-packet {
   box-shadow: 0 5px 15px rgba(0,0,0,0.2);
   }

2. 点击时添加缩放动画

   .red-packet:active {
   transform: scale(0.9);
   transition: transform 0.1s;
   }

3. 添加随机跳动效果

   computed: {
   randomDelays() {
    return this.packets.map(() => Math.random() * 0.5 + 's')
   }
   }

注意事项

• 动画性能优化：使用transform代替top/left等属性
• 移动端适配：考虑添加touch事件支持
• 可访问性：为红包添加ARIA标签

以上代码实现了基本的红包跳动效果，可根据实际需求调整动画参数和样式细节。