Mengapa Peralihan CSS Saya Tidak Berfungsi pada Elemen Tersembunyi?

Peralihan CSS Tidak Berfungsi Pada Mulanya pada Elemen Tersembunyi

Apabila cuba menghidupkan sifat elemen tersembunyi menggunakan peralihan CSS, anda mungkin menghadapi isu di mana elemen dipaparkan serta-merta pada kedudukan terakhirnya. Ini disebabkan oleh hubungan antara Model Objek CSS (CSSOM) dan Model Objek Dokumen (DOM).

Peranan Reflow dan CSSOM

Peralihan CSS menentukan keadaan awalnya berdasarkan gaya pengiraan sesuatu elemen. Walau bagaimanapun, apabila elemen mempunyai paparan: tiada, penyemak imbas mengabaikan gaya pengiraannya kerana elemen itu tidak dapat dilihat dengan berkesan oleh CSSOM.

Dalam senario anda, apabila anda mencetuskan peralihan pada .b, ia tidak mempunyai gaya pengiraan , kerana ia tersembunyi. Oleh itu, peralihan tidak boleh dimulakan dengan betul.

Memaksa Aliran Semula

Untuk menyelesaikan isu ini, anda boleh memaksa penyemak imbas mengemas kini gaya pengiraan elemen tersembunyi sebelum memulakan peralihan itu. Ini dilakukan dengan mencetuskan aliran semula.

Aliran semula ialah proses di mana penyemak imbas mengira semula reka letak dan gaya pengiraan keseluruhan halaman. Ini boleh dicetuskan oleh kaedah DOM tertentu atau oleh penyemak imbas itu sendiri apabila perlu, seperti apabila skrin dimuat semula.

Menggunakan API requestAnimationFrame(), anda boleh meminta penyemak imbas untuk melakukan aliran semula sejurus sebelum cat seterusnya operasi berlaku. Ini memastikan bahawa gaya pengiraan elemen anda adalah terkini apabila peralihan bermula.

Kod Kemas Kini

$('button').on('click', function () {
  $('.b').show(); // Apply display:block synchronously

  requestAnimationFrame(() => {
    // Force a reflow
    document.body.offsetHeight;

    // Trigger the transitions
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
})

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