类似宝呗青年点击金钱收入到瓶子的动效

之前接到了一个需求是点击收取爱心。
功能概述 ： 服务传来爱心数据，前端将获取的爱心数据从获取就随机展现并加悬浮动效。点击爱心收取单个动效。

// html: 在固定区域，循环展示爱心，点击单爱心可以收取单个
<ol class="loveOl" v-if="loveData&& loveData.length>0">
	<!--  收纳爱心动画特效  -->
    <li class="loveLi" :class="{'have':isTrans}" v-for="(item, index) in loveData" :key="index" @click="collect(item.type)">
    	<div class="love-list-div" :class="`li-${index + 1}`">
    		<span class="love-list-pic">{{item.points}}</span>
    		<span class="love-list-text">{{item.name}}</span>
    	</div>
    </li>
</ol>

// data数据，loveData是爱心背后代表的数据
data(){
	return {
		isTrans: true, // transform动效开关
		loveData: [
			{
				type: "share",
                points: 3,
                name: "任务1"
            },
            {
            	type: "share",
            	points: 5,
            	name: "任务2"
            },
            {
            	type: "share",
                points: 2,
                name: "任务3"
            },
       ],
	}
}

// css样式 love-list后面的ol是loveOl

```javascript
.love-list {
            >ol {
                position: relative;
                width: 750px;
                height: 280px;
                margin-top: -50px;
                text-align: center;
                z-index: 5;
                /*border: 1px solid #000;*/
                /*overflow: hidden;*/
                >span {
                    width: 270px;
                    height: 50px;
                    line-height: 50px;
                    display: inline-block;
                    text-align: center;
                    font-size: 22px;
                    color: #666;
                    background: rgba(255, 255, 255, 0.65);
                    border-radius: 25px;
                    margin: 110px auto 0;
                    @include animation-verticaltop-infinite(2.5s,10px)
                }
                .hand {
                    position: absolute;
                    width: 89px;
                    height: 97px;
                    z-index: 10;
                    .circle {
                        width: 75px;
                        height: 75px;
                        display: inline-block;
                        background: url(../images/circle.png);
                        background-size: 100% 100%;
                        // z-index: 10;
                        animation: circleHide 2s ease infinite both;
                    }
                    .hand-info {
                        position: relative;
                        width: 59px;
                        height: 65px;
                        left: 20px;
                        top: -52px;
                        display: inline-block;
                        background: url(../images/head.png);
                        background-size: 100% 100%;
                        // z-index: 10;
                        animation: fingerHandle 2s ease infinite both;
                    }

                }
                // 背景圆
                @keyframes circleHide {
                    0% {
                        opacity: 0;
                        transform: scale3d(0, 0, 0);
                    }
                    70% {
                        opacity: 1;
                        transform: scale3d(1.2, 1.2, 1.2);
                    }
                    100% {
                        opacity: 0;
                        transform: scale3d(0, 0, 0);
                    }
                }
                // 手指点击
                @keyframes fingerHandle {
                    0% {
                        transform: none;
                    }
                    70% {
                        transform: scale3d(.8, .8, .8);
                    }
                    100% {
                        transform: none;
                    }
                }
                >li {
                    position: absolute;
                    width: 96px;
                    height: 90px;
                    color: #333;
                    font-size: 20px;
                    display: flex;
                    flex-wrap: wrap;
                    animation-iteration-count: infinite;
                    transition: all ease-in-out 1.5s;
                    .love-list-pic {
                        display: inline-block;
                        width: 96px;
                        height: 84px;
                        color: #FFFFFF;
                        text-align: center;
                        line-height: 84px;
                        background-image: url("../images/love.png");
                        background-size: 100% 100%;
                    }
                    .love-list-text {
                        display: inline-block;
                        width: 96px;
                        text-align: center;
                    }
                    .love-list-div {
                        &.li-1, &.li-4 {
                            @include animation-verticaltop-infinite(2.5s,10px)
                        }
                        &.li-2, &.li-7, &.li-8, &.li-9 {
                            @include animation-verticaltop-infinite(1.5s,12px)
                        }
                        &.li-3, &.li-5 {
                            @include animation-verticaltop-infinite(3s,10px)
                        }
                        &.li-6 {
                            @include animation-verticaltop-infinite(2s,10px)
                        }
                    }
                }

            }

        }

methods点击方法

	collect(type) {
       	if(this.status === 2) {
	        // 活动已结束
            this.$toast("活动已结束,爱心不可以收取了哦～")
        } else {
			//点击一个,全部执行此操作  isReceive是锁，防抖机制
            if(!this.isReceive){
               	return ;
            } else {
              	this.isReceive = false;
	           	this.collectLove(type)
            }
        }
	},
	// 点击收取爱心
	collectLove(type) {
			var bottle = document.querySelector('.bottle-love');
			var loveLi = document.querySelectorAll('.loveLi')
			var loveOl = document.querySelector('.loveOl')
			var bottleLove = document.querySelector('.bottle-love');
			var bottleTop = bottle.getBoundingClientRect().top;
			var bottleLeft = bottle.getBoundingClientRect().left;
            let centerToken = sessionStorage.getItem("token");
			api('port',Object.assign({'type': type})).then(json => {
			    let data = (json && json.data) || {};
			    this.points = data.points || this.points;
				var that = this;
			    // 根据需求展示你的弹窗或者结果，我的需求是用弹窗展示给用户
				if(data.prizeinfo && data.prizeinfo.category !== 0) {
					if(data.prizeinfo.category === 'cash') {
						that.$config.errnoData.lovePrizeFail.title = '恭喜获得';
						setTimeout(function(){
							that.openPopup('error','lovePrizeFail')
						},1000)
					} 
				}
			    // isTrans 停止动画 收取爱心的动效
			    this.isTrans = false;
			    //点击一个,全部执行此操作
			    for(let i=0; i<loveLi.length; i++) {
			        let liTop = loveLi[i].getBoundingClientRect().top;
			        let liLeft = loveLi[i].getBoundingClientRect().left;
			        let topDiff = bottleTop - liTop;
			        let leftDiff = bottleLeft - liLeft;
			        loveLi[i].style.transform = `translate(${leftDiff}px,${topDiff}px)`;
			        setTimeout(()=>{
			            loveLi.forEach(v=>{
			                v.style.display= 'none';
			                // 清空loveData数组
			                // 瓶子里的爱心发光 发光的图片存在一秒,上面覆盖了一层图片,从0.8左右到1到到消失
			                bottleLove.style.backgroundImage = 'url("图片背景")'
			                this.light = true;
			                setTimeout(()=>{
			                    this.light = false;
			                    bottleLove.style.backgroundImage = 'url("图片背景")'
			                    this.loveData.splice(0,this.loveData.length)
			                },1000)
                            this.isReceive = true;
			            })
			        },500)
			    }
			}, json => {
			    let errno = json.errno > 0 ? json.errno : 1;
			    // 错误弹窗
			    this.openPopup('error', errno);
			})
		}

getLove() {
	// 随机展示爱心小动效,在created生命周期就会调取
	let loveLi = document.querySelectorAll('.loveLi');
	let hand = document.querySelectorAll('.hand');
    var fingerLength = loveLi.length; // 现有几个爱心
    var loveTop = [88,84,15,0,0,68,68,-20,-20];
    var loveLeft = [130,190,156,102,210,265,70,52,260];
    for(let i= 0 ; i<loveLi.length; i++) {
    	loveLi[i].style.top = loveTop[i]+'px';
    	loveLi[i].style.left = loveLeft[i]+'px';
    }
},