vueコンポーネントタイガーマシンはタイガーマシン効果に依存しません

最近活动したことがあってトラの机の効果をして、ネット上で探したのはほとんど以前のjqが书いたので、1つ探してコードを见て、书いたのが面倒だと感じて、それから自分で1つの简単なことを书きました.主にcss 3で回転加速減速の効果を実現する.設定要素の高さを取得する必要があるなどの問題でjqを容易に導入するためにjqに依存しなければjqの場所を原生jsに変更することができる.

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','');
        }
    }
}