Mengapa Peralihan CSS Saya Dilangkau atau Panggilan Balik Ditinggalkan dalam Permainan Saya?

Peralihan CSS Dilangkau atau Panggilan Balik Ditinggalkan

Dalam pertanyaan pelbagai segi ini, pembangun menyatakan kebingungan terhadap ketidakkonsistenan sekejap dalam peralihan CSS dan panggilan balik dalam projek permainan. Walaupun menggantikan jQuery dengan JavaScript tulen, percubaan untuk mengalihkan kedudukan projektil menggunakan CSS gagal berfungsi seperti yang dijangkakan, memerlukan tamat masa 1ms untuk memulakan peralihan. Tambahan pula, panggilan balik peralihan kadangkala gagal dilaksanakan, menyebabkan pembangun bingung.

Untuk menyelidiki selok-belok isu ini, kita mesti mengakui bahawa peralihan CSS bergantung pada perubahan dalam gaya pengiraan elemen. Apabila gaya sebaris ditetapkan, seperti dalam kes ini, penyemak imbas mungkin tidak mengemas kini gaya yang dikira serta-merta, mengakibatkan ketidakpadanan antara sifat unsur yang dijangka dan sebenar.

Apabila sifat peralihan digunakan, kiri dan atas dikira. nilai mungkin sudah sepadan dengan nilai yang dimaksudkan, meninggalkan peralihan tanpa tindakan untuk dilakukan. Oleh itu, ia dilangkau dan peristiwa tamat peralihan tidak dicetuskan.

Untuk membetulkannya, pembangun boleh menggunakan teknik untuk memaksa pengiraan semula gaya, seperti mengakses offsetHeight elemen atau mencetuskan aliran semula menggunakan kaedah DOM. Contohnya:

<code class="javascript">let animdiv = document.getElementById('animid');
animdiv.addEventListener("transitionend", function(event) { ... }, false);
// force a reflow
animdiv.offsetTop;
Object.assign(animdiv.style, {left: "100px", top: "100px" });</code>

Dengan memaksa pengiraan semula gaya, gaya yang dikira akan dikemas kini, memastikan peralihan dapat menjejaki perubahan dalam kedudukan elemen dengan tepat dan melancarkan peristiwa peralihan dengan betul.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Saya Dilangkau atau Panggilan Balik Ditinggalkan dalam Permainan Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!