Mengapa Peralihan CSS yang Ditugaskan JavaScript Saya Tidak Berfungsi?

Peralihan CSS yang Ditugaskan JavaScript Tidak Berfungsi

Apabila menggunakan peralihan CSS3 pada tayangan slaid melalui JavaScript, anda mungkin menghadapi isu yang membingungkan apabila dinyatakan peralihan gagal berfungsi walaupun gaya yang betul digunakan. Percanggahan ini timbul kerana peralihan CSS mencetuskan hanya apabila sifat yang ditentukan menukar nilai, bukan apabila peralihan ditakrifkan pada mulanya.

Untuk menyelesaikan isu ini, pastikan tiga syarat berikut dipenuhi:

Perubahan Nilai Harta: Selepas mentakrifkan peralihan, tetapkan nilai sifat baharu, mencetuskan animasi.
1. Dalam contoh anda, peralihan tidak berfungsi kerana perubahan nilai sifat (tetapan "kelegapan: 1") berlaku sebelum penyemak imbas mempunyai peluang untuk memproses peralihan yang diperuntukkan secara dinamik. Untuk membetulkannya, perkenalkan kelewatan sebelum menetapkan kelas "target-fadein":
2. Sebagai alternatif, sertakan kelas "target-fadein-begin" dalam HTML anda secara langsung, membenarkannya dihuraikan semasa dimuatkan dan bersedia untuk peralihan.
Ingat bahawa tugasan JavaScript peralihan itu sendiri tidak memulakan animasi; ia adalah perubahan dalam nilai harta yang mencetuskan kesan peralihan.

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