Mengapa Peralihan CSS Saya Tidak Berfungsi Apabila Digunakan Melalui JavaScript?

Peralihan CSS Tidak Digunakan Apabila Ditugaskan Melalui JavaScript

Walaupun menggunakan peralihan CSS3 dengan JavaScript, ia gagal berfungsi seperti yang diharapkan. Isu ini timbul apabila memperuntukkan kelas CSS yang mengandungi sifat peralihan secara dinamik.

Untuk mencetuskan peralihan dengan berkesan, prasyaratnya ialah:

• Takrifan eksplisit sifat (cth., kelegapan: 0;)
• Peralihan yang ditentukan (cth., peralihan: kelegapan 2s;)
• Menetapkan sifat baharu (cth., kelegapan: 1;)

Dalam JavaScript, masalah berpunca daripada masa pemprosesan pelayar. Gaya yang betul mesti digunakan terlebih dahulu, diikuti dengan kelewatan sedikit sebelum menetapkan kelas CSS yang bertanggungjawab untuk peralihan. Kelewatan ini membolehkan penyemak imbas mendaftarkan gaya yang digunakan sebelum peralihan digunakan.

Untuk melaksanakan kelewatan ini, gunakan window.setTimeout() untuk menangguhkan penambahan kelas CSS yang mengandungi peralihan:

<code class="js">window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);</code>

Sebagai alternatif, sertakan kelas pencetus peralihan (target-fadein-begin) dalam HTML apabila ia dimuatkan:

<code class="html"><div class="fadeable target-fadein-begin"></div></code>

Dengan memenuhi kriteria ini, peralihan CSS yang dicetuskan melalui JavaScript boleh berfungsi seperti yang diharapkan, membolehkan animasi lancar.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Saya Tidak Berfungsi Apabila Digunakan Melalui JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!