Vue Lottery Roulette? ?? ? Isactive Class Failure? ??? ??????.

? ????? VUE? ?? ? ?? ?? ?????? ?? ???? ?? isActive ???? ????? ??? ?? ???? ??? ?? ??? ?? ????. isActive ???? ???? ??? ???? ??? ????? ??? ???? ??? ???? ?? ????? ?? ? ? ????.

?? ?? ? ???

??? ?? ??? ?? ?? ?? ( roll ???)?? isActive ??? ???? ????? ????. VUE ?? ???? ??? ???? ????? ?????. ??? ??? ?????.

1. ??? isActive ?? ???? : ?? ??? this.$set isActive ????? ????? ??? ???? ????? ? ????. Vue.nextTick ???? ???? ???? ?? ?? ??? ???? ?? DOM? ??????? ???? ?? ????.

    ? () {
       // ... ?? ?? ...
   
       this.initdata.awardconfiglist.foreach (item => this. $ set (??, 'isactive', false));
       this. $ set (this.initdata.awardconfiglist [this.indent], 'isactive', true);
   
       vue.nexttick (() => {
           this.roll (); // ? ???? ?? ??? ???? ?????});
   }

2. requestAnimationFrame ???? ????? ??? : ?? ??? setTimeout ???? ???? ???? ?????? ??? ? ????. ?? requestAnimationFrame ???? ?? ????. ?? ???? ??? ????? ? ? ????? ? ???? ????? ??? ?? ? ? ????.

    ? () {
       // ... ?? ?? ...
   
       // settimeout ?? requestAnimationFrame? ?????
       this.timers = requestAnimationFrame (() => this.roll ());
   }

3. CSS ?? ?? ?? : isActive ???? ???? CSS ???? ?? ??? ???? ??? ??????.

    .maskbox {
       ?? : ?? 0.3 ?? ???; /* ?? ?? ?? ??*/
   }

   ??? isActive ?? ??? ? ???? ????? ?? ? ????.

?? ? roll ??? ? (?? ??? ??) :

 ? () {
    this.times = 1;
    this.indent = (this.times -1) % 9;

    // ... (?? ??? ??? ????) ...

    this.initdata.awardconfiglist.foreach (item => this. $ set (??, 'isactive', false));
    this. $ set (this.initdata.awardconfiglist [this.indent], 'isactive', true);

    this.timers = requestAnimationFrame (() => this.roll ());
}

?? ?? ??? ?? ??? ???? ? isActive ??? ??? ??? ????? ??? ? ??, ??? ??? ???? ? ???, ?? ?? ???? ? ???? ?? ?????. CSS? ??? ?? ??? ???????.

? ??? Vue? ?? ? Lottery Roulette Project??? ?? ???? ?? isactive ???? ???? ?? ??? ???? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!