Mengapa Peralihan Unsur Gagal Apabila Pada Mulanya Tersembunyi?

Peralihan Elemen Gagal Apabila Pada Mulanya Tersembunyi

Gambaran Keseluruhan Senario

Pertimbangkan dua elemen, berlabel ' A' dan 'B', di mana 'B' pada mulanya disembunyikan menggunakan paparan: tiada. Apabila menggunakan peralihan untuk menganimasikan 'B' apabila mendedahkannya dengan kaedah seperti $.show() atau $.toggle(), elemen itu serta-merta muncul pada kedudukan terakhirnya tanpa sebarang animasi.

Penjelasan

Puncanya terletak pada hubungan antara Model Objek Dokumen (DOM) dan Model Objek CSS (CSSOM). Peralihan CSS bergantung pada nilai pengiraan terakhir bagi sesuatu elemen. Untuk elemen yang pada mulanya tersembunyi, nilai yang dikira dipaparkan: tiada, yang pada asasnya mengalih keluar elemen daripada CSSOM.

Manipulasi dan Aliran Semula DOM

Fasa manipulasi DOM melibatkan pengemaskinian objek JavaScript, yang merupakan proses tak segerak. Sebaliknya, fasa aliran semula, yang mengemas kini peraturan CSS dan mengira semula gaya yang dikira, berlaku hanya apabila perlu. Memandangkan elemen tersembunyi pada mulanya tidak mempunyai gaya yang dikira, ia tidak mencetuskan aliran semula semasa manipulasi DOM.

Keadaan Permulaan Peralihan

Akibatnya, apabila peralihan untuk ' B' bermula, keadaan awal tidak ditentukan kerana aliran semula belum berlaku lagi. Ini boleh membawa kepada peralihan yang salah.

Memaksa Aliran Semula

Untuk menyelesaikan isu ini, anda boleh memaksa aliran semula sebelum mencetuskan peralihan. Anda boleh mencapai ini menggunakan Element.getBoundingClientRect() atau element.offsetHeight, yang memerlukan nilai pengiraan terkini dan, oleh itu, memaksa aliran semula.

Contoh yang Diperbaiki dengan Force Reflow

Berikut ialah coretan kod yang disemak semula yang memaksa aliran semula sebelum menghidupkan peralihan:

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

  requestAnimationFrame(() => { // wait just before the next paint
    document.body.offsetHeight; // force a reflow
    $('.b').css('right', '80%');
    $('.a').css('right', '80%');
  });
});

Dengan memaksa aliran semula sebelum peralihan dicetuskan, anda memastikan bahawa nilai yang dikira adalah terkini, membolehkan peralihan berfungsi dengan betul.

Atas ialah kandungan terperinci Mengapa Peralihan Unsur Gagal Apabila Pada Mulanya Tersembunyi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!