<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>
