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>