Mengapa Peralihan CSS Saya Tidak Mencetuskan Daripada JavaScript?

Peralihan CSS tidak Mencetuskan daripada JavaScript

Apabila menggunakan peralihan CSS3 kepada elemen melalui JavaScript, adalah penting untuk memahami mekanisme pengaktifan peralihan. Untuk membuat peralihan berkesan, tiga langkah penting mesti diikuti:

1. Tentukan Sifat Boleh Peralihan:
Pastikan elemen mempunyai sifat boleh peralihan yang dinyatakan dengan jelas. Dalam kes ini, kelegapan hendaklah ditetapkan kepada kelegapan: 0.

2. Tentukan Kesan Peralihan:
Takrifkan kesan peralihan menggunakan sifat peralihan, cth., peralihan: kelegapan 2s.

3. Kemas kini Harta Boleh Peralihan:
Untuk mencetuskan peralihan, sifat boleh peralihan mesti dikemas kini, cth., kelegapan: 1.

Menyelesaikan Isu dengan Peralihan JavaScript:
Seperti contoh kod yang diberikan, isu timbul kerana penyemak imbas tidak dapat memproses perubahan sifat serta-merta apabila ditetapkan melalui JavaScript. Untuk menyelesaikan masalah ini, kelewatan diperlukan untuk membolehkan penyemak imbas memproses permintaan sebelum menggunakan harta boleh alih. Satu penyelesaian ialah menggunakan fungsi window.setTimeout untuk melengahkan tugasan kelas sasaran-fadein sebanyak 100 milisaat.

Sebagai alternatif, anda boleh menambah kelas sasaran-fadein-mula terus ke HTML, yang akan dihuraikan pada pemuatan halaman dan pastikan peralihan sedia apabila diperlukan. Ingat, menambah sifat peralihan kepada elemen tidak mencetuskan animasi; menetapkan sifat peralihan.

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