vue簡単にドライブ抽選ができます。

本論文の例では、Vueの簡単な転職抽選の具体的なコードを共有しています。参考にしてください。具体的な内容は以下の通りです。
1.0思考整理
転職抽選はよく見られます。前にも書いたことがありません。今は暇があれば書いてください。次のように分析します。
1.1回転盤-----transformのrotateで解決できます。
1.2回転動画-----transion移行による処理
1.3滞在先及び当選提示？回転角度を制御して滞留位置を制御することによって、当選ヒントを与えて、追加のフィードバックを考慮します。
1.1行動を開始する
上の思考、私達は大体実現するステップを知って、まず私達はピクチャーをやります。

この円盤は10個あります。一つの360/10=36 degは、二つ目の-->20金貨に止まるとして、時計回り（初期位置を含めて1とします）、つまり全部で回転が必要です。
1.2当籤還付
上記の手順では、目標の位置までどうやってコントロールするかが分かりました。次はイベントのお知らせです。最初に考えたのは、回転時間を固定してタイマーをオンにして、明らかに当てにならないです。アニメーションが終わったらすぐに知らせてもいいものがありますか？ストランストサイトでは、このイベントを見つけました。要素アニメーションの終了イベントをモニターすることができます。

/**
        
**/
whichTransitionEvent(){
 let el = document.createElement('span'),
 transitions = {
 'transition':'transitionend',
 'OTransition':'oTransitionEnd',
 'MozTransition':'transitionend',
 'WebkitTransition':'webkitTransitionEnd'
 };
 for(let t in transitions){
 if( el.style[t] !== undefined ){
  return transitions[t];
 }
 }
 el = null;
}

2.0完全例
回転位置とイベント通知を制御して方法を見つけました。これからやります。
くり:

完全コード

<template>
 <div>
 <h3>    </h3>
 <div class="round_box" >
  <img class="img_rotate" ref="rotImg" src="../assets/zhuan.png" alt="">
  <div class="center">
  <div class="pointer" ></div>
  </div>
 </div>
 <button @click="toDraw" >    </button>
 </div>
</template>

<script>
export default {
 name:'rotaryDraw',
 data() {
 return {
  rotate: 0,
  resetRotate: 0,
  hitId: 1,// 1-10
  drawStatus: false
 }
 },
 async mounted() {
 await this.$nextTick();
 let evenTransition = this.whichTransitionEvent();
 let img = this.$refs.rotImg;
 let that = this;
 const hitAre = [ '30M   ','20  ','20M   ','10M   ','5  ',
    '    ','10  ','50M   ','2  ','100M   '
   ];
 //         
 img.addEventListener(evenTransition,tranHand,false);

 function tranHand() {
  //   
  that.resetRotate = that.rotate > 360 ? that.rotate % 360 : 0;
  img.style.transition = "none 0s ease 0s";
  img.style.transform = `rotate(${that.resetRotate}deg)`; 
  alert(`    【 ${hitAre[that.hitId - 1]} 】`);
  that.drawStatus = false
 }
 },
 methods: {
 start() {
  this.$refs.rotImg.style.transition = "all 3s ease 0s";
  this.$refs.rotImg.style.transform = `rotate(${this.rotate}deg)`;
 },
 toDraw() {
  if(this.drawStatus){
  console.log('     ');
  return
  }
  //     
  this.drawStatus = true
  /**
  *     10      36 ,    (id)   (id - 1)*36 
  *    3  360*4
  * this.rotate     
  * **/ 
  let reset = 360 * 4;
  let idx = this.getRandomInt(1,11);
  //     
  this.hitId = idx;
  //       
  let addRotate = this.resetRotate > 0 ? 360 - this.resetRotate : 0;
  //     
  let allRotate = this.rotate + (idx - 1) * 36 + reset + addRotate;
  //     
  this.rotate = this.setRotate(allRotate);

  this.start()
 },
 //            360*6
 setRotate(deg) {
  let rest = deg - 360;
  return rest > 360*6 ? this.setRotate(rest) : deg;
 },
 getRandomInt(min, max) {
  //    
  min = Math.ceil(min);
  //    
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //     ，    
 },
 //     
 whichTransitionEvent(){
  let el = document.createElement('span'),
  transitions = {
  'transition':'transitionend',
  'OTransition':'oTransitionEnd',
  'MozTransition':'transitionend',
  'WebkitTransition':'webkitTransitionEnd'
  };
  for(let t in transitions){
  if( el.style[t] !== undefined ){
   return transitions[t];
  }
  }
  el = null;
 }
 }

}
</script>

<style lang="scss" >
.img_rotate{
 transform: rotate(0deg);
}
.round_box{
 width: 100%;
 max-width: 375px;
 position: relative;
 overflow: hidden;
 img{
 width: 100%;
 }
 .center{
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
 .pointer{
  width: 5px;
  height: 90px;
  background-color: #f40;
  position: absolute;
  top: -90px;
 }
 .pointer::before{
  content:'';
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #f40;
  border-left: 15px solid transparent;
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
 }
 }
}

</style>

3.0 tips
全体的にいくつかの点に注意が必要です。
1、アニメ開始前に施錠する
2、動画終了後に通知し、状態リセット

/**
  ：
  3  reset 360*3
         （2 - 1）* 36 = 36
     360*3 + 36
     ，        ，            ，       
360*3 + 36            36 ，           
**/

3、回転を続けます。30 Mの流量を初期値として計算していますので、ここで回転するには30 Mを起点としています。この時、現在の滞在位置は300度、つまり60度を回せば、初期位置に戻ります。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。