Mengapa Peralihan CSS Gagal Apabila Digunakan Melalui JavaScript?

Membetulkan Peralihan CSS apabila Ditugaskan Melalui JavaScript

Apabila cuba menggunakan peralihan CSS3 melalui JavaScript, anda mungkin menghadapi situasi di mana peralihan yang ditentukan gagal untuk melaksanakan, walaupun gaya yang betul digunakan. Tingkah laku ini boleh membingungkan, terutamanya jika peralihan berfungsi apabila digunakan secara terus melalui pemeriksa penyemak imbas.

Punca Asas

Untuk memahami isu ini sepenuhnya, seseorang mesti memahami mekanik peralihan CSS. Tiga langkah penting mesti berlaku untuk peralihan berkuat kuasa:

1. Elemen yang disasarkan mesti mempunyai sifat peralihan yang ditakrifkan dengan jelas (cth., peralihan: kelegapan 2s;).
2. Elemen mesti mempunyai nilai awal untuk set sifat peralihan (cth., kelegapan: 0;).
3. Nilai baharu untuk sifat peralihan mesti digunakan (cth., kelegapan: 1;).

Apabila JavaScript memperuntukkan kelas secara dinamik, seperti dalam kes contoh yang diberikan, terdapat kemungkinan isu. Penyemak imbas memerlukan masa untuk memproses perubahan ini dan menetapkan kelas sasaran secara dinamik (cth., ".target-fadein") mungkin tidak memberikan kelewatan yang diperlukan.

Penyelesaian

Untuk menyelesaikan isu ini, kelewatan diperlukan sebelum menetapkan kelas sasaran. Ini memastikan bahawa penyemak imbas mempunyai masa yang mencukupi untuk menggunakan sifat peralihan dan bersedia untuk animasi. Coretan kod berikut menggambarkan penggunaan kelewatan apabila menggunakan kelas sasaran:

window.setTimeout(function() {
  slides[targetIndex].className += " target-fadein";
}, 100);

Secara bergantian, anda boleh menambah kelas sasaran ".target-fadein-begin" ke dalam HTML secara langsung, supaya ia dihuraikan sedang dimuatkan dan bersedia untuk peralihan.

Cerapan Tambahan

Adalah penting untuk menyedari bahawa hanya menambahkan peralihan kepada elemen tidak mencetuskan animasi. Animasi sebenar dicetuskan dengan menukar nilai harta peralihan. Ini menerangkan sebab menetapkan nilai sifat awal dan baharu secara manual dalam pemeriksa berfungsi.

Untuk penjelasan lanjut, pertimbangkan coretan kod berikut:

// Works
document.getElementById('fade1').className += ' fade-in'

// Doesn't work
document.getElementById('fade2').className = 'fadeable'
document.getElementById('fade2').className += ' fade-in'

// Works
document.getElementById('fade3').className = 'fadeable'

window.setTimeout(function() {
  document.getElementById('fade3').className += ' fade-in'
}, 50)

Dalam senario ini, blok pertama berfungsi kerana ketiga-tiga syarat untuk peralihan dipenuhi. Elemen mempunyai peralihan yang ditentukan, kelegapan awal ditetapkan kepada 0 dan kelegapan baharu ditetapkan kepada 1. Blok kedua gagal kerana nilai kelegapan awal tidak ditakrifkan secara eksplisit sebelum kelas peralihan digunakan. Blok ketiga berfungsi kerana kelewatan membolehkan penyemak imbas memproses tetapan nilai awal sebelum peralihan digunakan.

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