Selesaikan masalah kegagalan kelas isaktif ketika rolet loteri vue sedang bergulir

Artikel ini membincangkan masalah bahawa kelas isActive gagal semasa proses rolling dalam projek rolet loteri yang dibangunkan oleh Vue, mengakibatkan kesan rolling rolet yang lemah. Masalahnya ditunjukkan sebagai kelas isActive hanya berkuatkuasa pada awal dan akhir menatal, dan tidak dapat dipaparkan secara normal semasa proses menatal.

Analisis dan penyelesaian masalah

Penyebab utama masalah terletak pada mekanisme kemas kini keadaan isActive dalam logik rolling rolet (kaedah roll ) bertentangan dengan mekanisme kemas kini asynchronous sistem responsif VUE. Berikut ini memberikan penambahbaikan:

1. Kemas Kini Status isActive Synchronous: Kod asal isActive this.$set Adalah disyorkan untuk menggabungkan Vue.nextTick untuk memastikan DOM dikemas kini sebelum melakukan operasi seterusnya untuk memastikan penyegerakan:

    roll () {
       // ... kod lain ...
   
       this.initdata.awardConfigList.Foreach (item => ini. $ set (item, 'isactive', false));
       Ini. $ set (this.initdata.awardconfiglist [this.indent], 'isactive', true);
   
       Vue.nexttick (() => {
           this.roll (); // rekursif memanggil kaedah roll untuk melaksanakan animasi});
   }

2. Mengoptimumkan Animasi Menggunakan requestAnimationFrame : Kod asal menggunakan setTimeout untuk mengawal skrol, yang boleh menyebabkan animasi menjadi tidak lancar. Adalah disyorkan untuk menggunakan requestAnimationFrame sebaliknya, yang boleh disegerakkan dengan lebih baik dengan mekanisme penyemak imbas dan mencapai kesan animasi yang lebih lancar:

    roll () {
       // ... kod lain ...
   
       // Gunakan requestanimationframe dan bukannya setTimeout
       this.timers = requestAnimationFrame (() => this.roll ());
   }

3. Tambah Kesan Peralihan CSS: Pastikan gaya CSS sepadan dengan kelas isActive mengandungi kesan peralihan, sebagai contoh:

    .maskbox {
       Peralihan: Semua 0.3s mudah; /* atau atribut peralihan lain*/
   }

   Ini boleh membuat perubahan keadaan isActive lebih lancar dan lebih semula jadi.

Contoh kaedah roll yang lebih baik (mengintegrasikan cadangan di atas):

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

    // ... (logik lain tetap tidak berubah) ...

    this.initdata.awardConfigList.Foreach (item => ini. $ set (item, 'isactive', false));
    Ini. $ set (this.initdata.awardconfiglist [this.indent], 'isactive', true);

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

Melalui penambahbaikan di atas, masalah kegagalan kelas isActive semasa proses menatal dapat diselesaikan dengan berkesan, pengalaman pengguna dapat diperbaiki, dan rolet loteri menatal lebih lancar dan lebih semula jadi. Ingatlah untuk menambah kesan peralihan yang diperlukan ke CSS anda.

Atas ialah kandungan terperinci Dalam projek Roulette Loteri yang dibangunkan oleh Vue, bagaimana menyelesaikan masalah yang kelas ISACTIVE tidak berkuatkuasa semasa proses rolling?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!