uniapp--简单实现红包雨demo
<template> <view class="home"> <view class="content"> <view @animationend="runend(index)" @animationstart="runstart(index)" v-for="(item,index) in packStyle" :key="index" class="envelope" :style="item"> </view> </view> </view> </template> <script> export default { data() { return { packStyle: [] }; }, onLoad() { // 随即生成红包 this.createRedPack(); }, mounted() { }, onReady() { }, methods: { runstart(key){ if(key===0){ console.log('监听动画开始'); } }, runend(key){ if(key===this.packStyle.length-1){ console.log('监听动画结束---下一波红包开始'); this.createRedPack() } }, createRedPack(){ // 随机生成30个红包 var initNumber = 0; for (var i = 0; i < 60; i++) { let lefts = (Math.floor(Math.random()*5+5)); // 随机边距 let delay = Math.floor(Math.random()*5+2); // 延迟时间 initNumber+=lefts; // 确保唯一,不让红包出现重叠现象 this.packStyle.push({ 'left': initNumber+'%', 'top': lefts+'px', 'animation-delay': delay/2+'s' }) } } } }; </script> <style> .home { width: 100%; height: 100%; } .content { position: relative; height: 100%; background: #fff; overflow: hidden; } .envelope { position: fixed; opacity: 0; animation: drops 1.2s cubic-bezier(.22,.22,.39,.26) 1; width: 60px; height: 60px; background: url(../../static/hongbaotu.png) no-repeat; /* background-color: #007AFF; */ background-size: 60px 60px; } @keyframes drops { 0% { opacity: 0; } 20% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translate3d(10px, 100vh, -10px); } } </style>