Vue ターンテーブル抽選の簡単な実装

/**
アニメーション終了イベント対応**/
どの遷移イベント(){
 el = document.createElement('span') とします。
 遷移 = {
 '遷移':'遷移終了',
 'OTransition':'oTransitionEnd',
 'MozTransition':'遷移終了',
 'WebkitTransition':'webkitTransitionEnd'
 };
 for(let t in transitions){
 if(el.style[t] !== 未定義){
  transitions[t]を返します。
 }
 }
 el = null;
}

<テンプレート>
 <div>
 <h3>ロータリードロー</h3>
 <div class="round_box">
  <img class="img_rotate" ref="rotImg" src="../assets/zhuan.png" alt="">
  <div class="center">
  <div class="ポインタ" ></div>
  </div>
 </div>
 <button @click="toDraw" >クリックして描画</button>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 名前:'rotaryDraw',
 データ（） {
 戻る {
  回転: 0,
  リセット回転: 0,
  ヒットID: 1, // 1-10
  描画ステータス: false
 }
 },
 非同期マウント() {
 これを待ちます。$nextTick();
 evenTransition = this.whichTransitionEvent(); とします。
 img = this.$refs.rotImg; とします。
 that = this とする;
 const hitAre = ['30M トラフィック パッケージ','20 ゴールド コイン','20M トラフィック パッケージ','10M トラフィック パッケージ','5 ゴールド コイン',
    「ご参加ありがとうございました」、「ゴールドコイン10枚」、「50Mトラフィックパッケージ」、「ゴールドコイン2枚」、「100Mトラフィックパッケージ」
   ];
 // アニメーションの終了を監視します。img.addEventListener(evenTransition,tranHand,false);

 関数tranHand() {
  // リセット that.resetRotate = that.rotate > 360 ? that.rotate % 360 : 0;
  img.style.transition = "なし 0秒 遷移 0秒";
  img.style.transform = `rotate(${that.resetRotate}deg)`; 
  alert(`抽選結果 [ ${hitAre[that.hitId - 1]} ]`);
  that.drawStatus = false
 }
 },
 メソッド: {
 始める（） {
  this.$refs.rotImg.style.transition = "すべて 3 秒、0 秒で遷移";
  this.$refs.rotImg.style.transform = `rotate(${this.rotate}deg)`;
 },
 描画する() {
  if(this.drawStatus){
  console.log('抽選進行中');
  戻る
  }
  // ステータスをマーク this.drawStatus = true
  /**
  * ディスクは全部で10枚あり、それぞれ36度、停止位置（id）度（id - 1）* 36 
  * ベース3円360*4
  * this.rotate 現在の角度* **/ 
  リセット = 360 * 4;
  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を超えません
 回転角度を設定します。
  休止状態を deg - 360 とします。
  残りが 360*6 より大きい場合は、 this.setRotate(rest) : deg; を返します。
 },
 getRandomInt(最小値, 最大値) {
  // 上向きに集める min = Math.ceil(min);
  // 下向きに収集 max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //最大値は含まず、最小値を含む},
 // アニメーション対応 whichTransitionEvent(){
  el = document.createElement('span') とします。
  遷移 = {
  '遷移':'遷移終了',
  'OTransition':'oTransitionEnd',
  'MozTransition':'遷移終了',
  'WebkitTransition':'webkitTransitionEnd'
  };
  for(let t in transitions){
  if(el.style[t] !== 未定義){
   transitions[t]を返します。
  }
  }
  el = null;
 }
 }

}
</スクリプト>

<スタイル lang="scss" >
.img_rotate{
 変換: 回転(0度);
}
.ラウンドボックス{
 幅: 100%;
 最大幅: 375px;
 位置: 相対的;
 オーバーフロー: 非表示;
 画像{
 幅: 100%;
 }
 。中心{
 位置: 絶対;
 上位: 50%;
 左: 50%;
 変換: translate(-50%,-50%);
 .ポインタ{
  幅: 5px;
  高さ: 90px;
  背景色: #f40;
  位置: 絶対;
  上: -90px;
 }
 .ポインタ::before{
  コンテンツ：'';
  幅: 0;
  高さ: 0;
  border-top: 15px 透明の実線;
  border-right: 15px 透明の実線;
  下境界線: 15px 実線 #f40;
  border-left: 15px 透明の実線;
  位置: 絶対;
  上: -20px;
  左: 50%;
  変換: translateX(-50%);
 }
 }
}

</スタイル>

/**
例えば：
ベース3円リセット360*3
2番目の停止位置は（2 - 1）* 36 = 36です
合計角度 360*3 + 36
アニメーションが停止した後は、回転し続けるため角度を増やし続けることは不可能なので、360*3 + 36 をリセットする必要があります。実際には、36 度回転してから必要な角度を増やすことを検討できます**/