Vue einfache Implementierung einer Plattenspielerlotterie

/**
Kompatibel mit Animations-Endereignis**/
welchesÜbergangsereignis(){
 let el = document.createElement('span'),
 Übergänge = {
 'Übergang':'Übergangsende',
 'OÜbergang':'oÜbergangsende',
 'MozTransition':'Übergangsende',
 'WebkitTransition':'webkitTransitionEnd'
 };
 für (lass t in Übergängen) {
 wenn( el.style[t] !== undefiniert ){
  Rückgabeübergänge[t];
 }
 }
 el = null;
}

<Vorlage>
 <div>
 <h3>Rotationszug</h3>
 <div Klasse="runde_box" >
  <img class="img_rotate" ref="rotImg" src="../assets/zhuan.png" alt="">
  <div Klasse="Mitte">
  <div Klasse="Zeiger" ></div>
  </div>
 </div>
 <button @click="toDraw" >Zum Zeichnen klicken</button>
 </div>
</Vorlage>

<Skript>
Standard exportieren {
 Name:'rotaryDraw',
 Daten() {
 zurückkehren {
  drehen: 0,
  zurücksetzenRotate: 0,
  Treffer-ID: 1, // 1-10
  drawStatus: false
 }
 },
 asynchron gemountet() {
 warte darauf.$nextTick();
 sei evenTransition = this.whichTransitionEvent();
 lass img = dies.$refs.rotImg;
 lass das = dies;
 const hitAre = ['30M Verkehrspaket','20 Goldmünzen','20M Verkehrspaket','10M Verkehrspaket','5 Goldmünzen',
    „Vielen Dank für Ihre Teilnahme“, „10 Goldmünzen“, „50M Verkehrspaket“, „2 Goldmünzen“, „100M Verkehrspaket“
   ];
 //Monitoranimation beenden img.addEventListener(evenTransition,tranHand,false);

 Funktion tranHand() {
  // Zurücksetzen that.resetRotate = that.rotate > 360 ? that.rotate % 360 : 0;
  img.style.transition = "keine 0 s Leichtigkeit 0 s";
  img.style.transform = `drehen(${that.resetRotate}deg)`; 
  alert(`Lotterieergebnis [ ${hitAre[that.hitId - 1]} ]`);
  that.drawStatus = falsch
 }
 },
 Methoden: {
 Start() {
  this.$refs.rotImg.style.transition = "alle 3er locker 0er";
  dies.$refs.rotImg.style.transform = `drehen(${this.rotate}deg)`;
 },
 zuZeichnen() {
  wenn(dieser.drawStatus){
  console.log('Lotterie läuft');
  zurückkehren
  }
  // Status markieren this.drawStatus = true
  /**
  * Es gibt insgesamt 10 Scheiben mit jeweils 36 Grad, Stoppposition (id) Grad (id - 1) * 36 
  * Basis 3 Kreise 360*4
  * this.rotate aktuellen Winkel* **/ 
  lass zurücksetzen = 360 * 4;
  Lassen Sie idx = this.getRandomInt(1,11);
  // Treffer festlegen this.hitId = idx;
  // Es müssen mehrere Winkel gedreht werden let addRotate = this.resetRotate > 0 ? 360 - this.resetRotate : 0;
  // Gesamtwinkel let allRotate = this.rotate + (idx - 1) * 36 + reset + addRotate;
  // Winkelbegrenzung this.rotate = this.setRotate(allRotate);

  dies.start()
 },
 // Der rekursive Berechnungswinkel überschreitet nicht 360*6
 setzeRotate(Grad) {
  lass rest = Grad - 360;
  Rest zurückgeben > 360*6? this.setRotate(rest) : Grad;
 },
 getRandomInt(min, max) {
  // Nach oben sammeln min = Math.ceil(min);
  // Nach unten sammeln max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; //Ohne den Maximalwert, mit dem Minimalwert},
 // Animation kompatibel whichTransitionEvent(){
  let el = document.createElement('span'),
  Übergänge = {
  'Übergang':'Übergangsende',
  'OÜbergang':'oÜbergangsende',
  'MozTransition':'Übergangsende',
  'WebkitTransition':'webkitTransitionEnd'
  };
  für (lass t in Übergängen) {
  wenn( el.style[t] !== undefiniert ){
   Rückgabeübergänge[t];
  }
  }
  el = null;
 }
 }

}
</Skript>

<style lang="scss" >
.img_rotate{
 transformieren: drehen (0 Grad);
}
.runde_box{
 Breite: 100 %;
 maximale Breite: 375px;
 Position: relativ;
 Überlauf: versteckt;
 img{
 Breite: 100 %;
 }
 .Center{
 Position: absolut;
 oben: 50 %;
 links: 50%;
 transformieren: übersetzen(-50 %,-50 %);
 .Zeiger{
  Breite: 5px;
  Höhe: 90px;
  Hintergrundfarbe: #f40;
  Position: absolut;
  oben: -90px;
 }
 .pointer::before{
  Inhalt:'';
  Breite: 0;
  Höhe: 0;
  Rahmen oben: 15px durchgehend transparent;
  Rahmen rechts: 15px durchgehend transparent;
  Rahmen unten: 15px durchgezogen #f40;
  Rahmen links: 15px durchgehend transparent;
  Position: absolut;
  oben: -20px;
  links: 50%;
  transformieren: übersetzenX(-50%);
 }
 }
}

</Stil>

/**
Zum Beispiel:
Basis 3 Kreise zurücksetzen 360*3
Die zweite Stoppposition ist (2 - 1) * 36 = 36
Gesamtwinkel 360*3 + 36
Nachdem die Animation gestoppt wurde, ist es unmöglich, den Winkel weiter zu erhöhen, da die Drehung weitergeht. Daher muss 360 * 3 + 36 zurückgesetzt werden. Tatsächlich können Sie eine Drehung um 36 Grad in Betracht ziehen und dann den erforderlichen Winkel erhöhen ** /