标签：index 抽奖 itemHeight id ease 组件 disClick vuetiger
最近做了tiger机组件，用到相应的效果，参考了下面的代码，已经测试可以用，非常赞
下面为所转：
最近过活动要做个tiger机效果，发现网上找的几乎都是以前的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>
————————————————
版权声明：本文为CSDN博主「格竹悟道」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/webjhh/article/details/80738524
标签：index,抽奖,itemHeight,id,ease,组件,disClick,vuetiger 来源： https://www.cnblogs.com/snowhite/p/16174296.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。