Mengapa Peralihan CSS Tidak Berfungsi pada Elemen Tersembunyi Pada Mulanya?

Peralihan CSS Tidak Berfungsi pada Elemen Tersembunyi Pada Mulanya

Memahami Isu

Dalam senario yang diterangkan, terdapat dua div , satu daripadanya pada mulanya disembunyikan menggunakan display:none. Apabila div tersembunyi didedahkan menggunakan kaedah seperti show() atau toggle(), peralihan sifatnya tidak berlaku dengan lancar. Sebaliknya, div muncul serta-merta pada kedudukan akhir yang diingini.

Punca Tingkah Laku

Untuk memahami tingkah laku ini, kita perlu menyelidiki hubungan antara CSSOM ( Model Objek CSS) dan DOM (Model Objek Dokumen).

Peralihan CSS bergantung pada mengetahui permulaan elemen nilai gaya dikira untuk menentukan titik permulaan peralihan. Walau bagaimanapun, elemen dengan display:none tidak mempunyai nilai gaya yang dikira kerana ia tidak dianggap boleh dilihat dalam CSSOM.

Pengaruh Reflow

Reflow ialah operasi penyemak imbas yang mengira semula susun atur dokumen berdasarkan perubahan pada DOM atau peraturan gaya. Apabila display:none dialih keluar, penyemak imbas memulakan aliran semula untuk mengemas kini DOM dan nilai gaya yang dikira.

Dalam senario yang diberikan, jika peralihan bermula sebelum aliran semula berlaku, nilai gaya pengiraan awal untuk div tersembunyi akan menjadi tidak sah, membawa kepada kemunculan mendadak.

Menyelesaikan Isu

Pilihan 1: Menggunakan $.animate()

$.animate() mencetuskan aliran semula sebelum melaksanakan animasi, memastikan bahawa nilai gaya yang dikira adalah terkini.

Pilihan 2: Memaksa secara manual Reflow

Menggunakan requestAnimationFrame() membolehkan kami menjadualkan pelaksanaan kod sebelum operasi cat seterusnya. Di dalam panggilan balik, kita boleh memaksa aliran semula menggunakan kaedah seperti document.body.offsetHeight, dan kemudian segera mencetuskan peralihan dengan menetapkan nilai sifat CSS yang dikehendaki.

Kesimpulan

Kemunculan mendadak elemen yang pada mulanya tersembunyi semasa peralihan CSS adalah disebabkan oleh kekurangan nilai gaya pengiraan yang sah. Dengan memahami proses pengaliran semula dan menggunakan teknik untuk memaksa pengaliran semula, kami boleh memastikan peralihan lancar untuk elemen yang pada mulanya tersembunyi.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Tidak Berfungsi pada Elemen Tersembunyi Pada Mulanya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!