Mengapa Peralihan CSS Tidak Berfungsi pada Elemen Tersembunyi?

Peralihan CSS Tidak Mencetuskan Elemen Tersembunyi

Dalam pembangunan web, adalah perkara biasa untuk menggunakan peralihan CSS untuk menghidupkan perubahan pada sifat elemen. Walau bagaimanapun, batu penghalang biasa ialah apabila elemen pada mulanya disembunyikan (cth., dengan paparan: tiada) dan kemudian kelihatan, tetapi peralihan CSS tidak diaktifkan.

Behind the Scenes dengan CSSOM dan DOM

Untuk memahami tingkah laku ini, kita perlu mempertimbangkan hubungan antara Model Objek CSS (CSSOM) dan Model Objek Dokumen (DOM). DOM mewakili struktur HTML halaman, manakala CSSOM mewakili gaya yang dikira untuk setiap elemen.

Semasa proses pemaparan, manipulasi DOM (mis., menukar sifat paparan) berlaku dahulu. Kemudian, penyemak imbas mengira semula gaya yang dikira (CSSOM) untuk semua elemen pada halaman, yang dikenali sebagai aliran semula atau reka letak. Akhirnya, perubahan dipaparkan secara visual pada skrin (cat).

Kesan pada Peralihan CSS

Peralihan CSS memerlukan gaya pengiraan awal elemen untuk mengira permulaan negeri. Walau bagaimanapun, untuk elemen tersembunyi, gaya yang dikira pada dasarnya adalah batal kerana ia tidak dipaparkan. Ini bermakna apabila peralihan dicetuskan, keadaan awal adalah tidak sah untuk sebarang nilai peralihan.

Penyelesaian

Untuk menyelesaikan isu ini, anda boleh menggunakan salah satu daripada yang berikut pendekatan:

• Paksa Aliran Semula: Menggunakan requestAnimationFrame atau kaedah lain yang mencetuskan aliran semula memaksa penyemak imbas untuk mengira semula gaya yang dikira. Dengan menggunakan aliran semula sejurus sebelum peralihan dicetuskan, anda memastikan gaya yang dikira adalah terkini.
• Gunakan $.animate()**: .animate() secara dalaman memaksa aliran semula dengan mencetuskan manipulasi DOM dan kemudian menjadualkan panggilan balik untuk mencetuskan peralihan. Walau bagaimanapun, pendekatan ini biasanya lebih perlahan daripada menggunakan kaedah aliran semula terus.

Contoh

Coretan kod berikut menunjukkan cara untuk memaksa aliran semula menggunakan requestAnimationFrame:

$('button').on('click', function() {
  $('.b').show(); // Show the hidden element

  requestAnimationFrame(() => { // Force a reflow
    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

Dengan menggunakan requestAnimationFrame, kami memastikan bahawa peralihan CSS akan dicetuskan dengan jayanya, walaupun untuk elemen tersembunyi pada mulanya.

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