最近过活动要做个老虎机效果，发现网上找的几乎都是以前的jq写的，找了一个后看了看代码，感觉写了的比较麻烦，然后自己写了一个简单的。主要是用css3来实现转动加速减速的效果。应为需要获取设置元素高度等问题，为了方便引入了jq,如果不依赖jq可吧用jq的地方改成原生js。

<template>
    <div>
		<div class="box">
			<div class="groups animation-ease" v-for="k in 3" @webkitTransitionEnd="endGame(k)">
				<ul class="group-item" v-for="i in (round+1)" >
					<li class="prize-item" v-for="item in prizes">{{item}}</li>
				</ul>
			</div>
		</div>
		<div  @click="startClick">{{disClick?'抽奖中...':'点击开始'}}</div>
	</div>
</template>
<script>
import $ from 'jquery'
export default {
	data(){
		return {
			round:6,//转几回合后停下来
			prizes:[1,2,3,4,5,6,7,8,9,11,12,13,14,15],
			disClick:false,//防止多次点击
			itemHeight:0,//每个奖品的高度
            prize_id:'',//中奖id
		}
	},
	mounted(){
		this.itemHeight = $('.prize-item').outerHeight()
		$('.groups').css('height',this.itemHeight * this.prizes.length*(this.round+1))
	},
	methods:{
		startClick(){//开始抽奖
			if(this.disClick){
				return
            }
			//获取中奖的id
			let index = parseInt(Math.random()*this.prizes.length);
			this.prizd_id = this.prizes[index];
			this.runGame(index)
		},
		runGame(index){//启动抽奖
			this.disClick = true;
			this.resetGame();
			var itemHeight = this.itemHeight;
			var groupsHeight = this.round*$('.group-item').height();
			$('.groups').each(function(e){
				var pos = index*itemHeight + groupsHeight
				setTimeout(()=>{
					$(this).addClass('animation-ease').css('transform','translate3d(0, -'+pos+'px, 0)')
				},e*300)
			})
		},
        endGame(k){//抽奖结束后的回调
            if(k==3){
                alert('恭喜您中了'+this.prizd_id)
                this.disClick = false;
            }
		},
		resetGame(){//重置状态
			$('.groups').removeClass('animation-ease').css('transform','');
		}
	}
}
</script>
<style lang="less" scoped>
.box{
	width:300px;
	height:100px;
	overflow: hidden;
	background: #fff;
	.animation-ease{
		transition-property:transform;
		transition-duration: 3s;
		transition-timing-function: ease;
	}
	.groups{
		float: left;
		width:100px;
		text-align: center;
		.prize-item{
			width:100px;
			height:100px;
			font-size:50px;
		}
	}
}
</style>