<template>
<div>
<div
class="playBotn"
@click="playPack"
>
点我开始抢红包
</div>
<div
class="ser_home"
v-show="packShow"
>
<ul
class="red_packet"
id="red_packet"
>
<template v-for="(item, index) in liParams">
<li
:style="{ left: item.left, animationDuration: item.durTime, webkitAnimationDuration: item.durTime}"
:class="item.cls"
:data-index="index"
@webkitAnimationEnd="removeDom"
>
<a
@click.stop="hongbao(index)"
v-show="item.index != index"
>
<i :style="{ transform: item.transforms, webkitTransform: item.transforms}"></i>
</a>
</li>
</template>
</ul>
<div class="packRed">
<p>倒计时{{packTime}}s,抢到了{{packNum}}个红包</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: "whole",
data() {
return {
liParams: [],
timer: null,
duration: 10000, // 红包定义时间
packNum: 0,
packShow: false,
packTime: 14, //弹窗展示时间
setInter: "",
};
},
created() {},
mounted() {},
methods: {
playPack() {
this.packShow = true;
this.startRedPacket();
setTimeout(() => {
this.packShow = false;
this.$dialog
.alert({
title: "标题",
message: "恭喜您抢到了" + this.packNum + "个红包",
})
.then(() => {
// this.packNum = 0;
// this.packTime = 14;
clearInterval(this.setInter);
location.reload();
});
}, 14000);
this.setInter = setInterval(() => {
this.packTime -= 1;
}, 1000);
},
/**
* 开启动画
*/
startRedPacket() {
let win =
document.documentElement.clientWidth || document.body.clientWidth;
let left = parseInt(Math.random() * (win - 50) + 0);
let rotate = parseInt(Math.random() * (45 - -45) - 45) + "deg"; // 旋转角度
let scales = (Math.random() * (12 - 8 + 1) + 8) * 0.1; // 图片尺寸
let durTime = Math.random() * (2.5 - 1.2 + 1) + 3 + "s"; // 时间 1.2和1.2这个数值保持一样
this.liParams.push({
left: left + "px",
cls: "move_1",
transforms: "rotate(" + rotate + ") scale(" + scales + ")",
durTime: durTime,
});
setTimeout(() => {
// 多少时间结束
clearTimeout(this.timer);
return;
}, this.duration);
this.timer = setTimeout(() => {
this.startRedPacket();
}, 100);
},
/**
* 回收dom节点
*/
removeDom(e) {
let target = e.currentTarget;
document.querySelector("#red_packet").removeChild(target);
},
hongbao(index) {
this.liParams[index].index = index;
this.packNum += 1;
},
},
};
</script>
<style scoped lang="less">
.playBotn {
width: 100%;
font-size: 40px;
text-align: center;
background: red;
color: #fff;
}
.ser_home {
position: fixed;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 99;
width: 100%;
height: 100vh;
}
.packRed {
position: fixed;
top: 10px;
right: 10px;
display: flex;
p {
padding: 10px 15px;
box-sizing: border-box;
border-radius: 20px;
background: red;
color: #fff;
font-size: 26px;
}
}
.red_packet {
display: block;
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
i {
width: 48px;
height: 69px;
display: block;
background: url("https://sucai.suoluomei.cn/sucai_zs/images/20201013173323-hbfxhb.png")
no-repeat;
background-size: 100% 100%;
}
li {
position: absolute;
animation: all 3s linear;
top: -100px;
z-index: 10;
&.move_1 {
-webkit-animation: aim_move 5s linear 1 forwards;
animation: aim_move 5s linear 1 forwards;
}
}
a {
display: block;
}
}
@keyframes aim_move {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(120vh);
transform: translateY(120vh);
}
}
</style>
Vue实现移动端红包雨
最新推荐文章于 2024-06-13 14:30:20 发布