最近过活动要做个老虎机效果, 发现网上找的几乎都是以前的 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>
来源: http://www.jianshu.com/p/8d70d74e36fd