Mengapa Peralihan CSS Saya Melangkau dan Panggilan Balik Gagal Dicetuskan?

Peralihan CSS Tidak Dimulakan atau Panggilan Balik Tidak Dipanggil: Analisis

Isu anda berpunca daripada keanehan dalam peralihan CSS dan penyemak imbas proses rendering. Pada mulanya, anda sebaris HTML dengan nilai kedudukan CSS, menetapkan peralihan pada sifat kiri dan atas. Selepas menambah nilai lokasi baharu, anda menjangkakan peralihan, tetapi ia melangkau tanpa mencetuskan panggilan balik.

Menariknya, menambah setTimeout 1ms untuk melengkapkan perubahan gaya telah memulakan peralihan. Walau bagaimanapun, kadangkala panggilan balik tetap tidak dinyalakan. Tingkah laku ini boleh dikaitkan dengan pemasaan penyemak imbas.

Penjelasan:

Apabila gaya baharu ditetapkan, penyemak imbas masih belum menggunakan gaya sebaris pada gaya yang dikira . Gaya pengiraan elemen kekal tidak ditetapkan untuk sifat kiri dan atas, lalai kepada 0px. Sebarang peralihan yang digunakan kemudian hanya sepadan dengan nilai yang ditetapkan, tanpa meninggalkan peralihan berlaku.

Untuk menyelesaikan masalah ini, aliran semula mesti dipaksa untuk mengemas kini gaya. Ini boleh dilakukan menggunakan pengambil offsetHeight atau kaedah lain yang serupa yang mencetuskan aliran semula.

Contoh Menggunakan offsetHeight:

<code class="javascript">let tablehtml = `
<div id="spanky" 
  style="position: absolute; 
    left: 10px; 
    top: 10px; 
    background-color:blue; 
    width:20px; 
    height:20px;
    transition: left 1000ms linear 0s, top 1000ms linear 0s;">
</div>`;

document.body.innerHTML += tablehtml;

let animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) { 
  animdiv.style.backgroundColor='red';
}, false);
// force a reflow
animdiv.offsetTop;
// now animdiv will have all the inline styles set
// it will even have a proper display

animdiv.style.backgroundColor='green';
Object.assign(animdiv.style, {
  left: "100px", 
  top: "100px" 
});</code>

Atas ialah kandungan terperinci Mengapa Peralihan CSS Saya Melangkau dan Panggilan Balik Gagal Dicetuskan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!