Mengapakah peralihan CSS saya tidak memulakan atau mencetuskan fungsi panggil balik, dan bagaimana saya boleh membetulkannya menggunakan setTimeout?

Peralihan CSS Tidak Bermula atau Panggilan Balik Tidak Dipanggil

Ringkasan Masalah

Kedudukan elemen HTML dikemas kini menggunakan peralihan CSS. Walau bagaimanapun, peralihan gagal dicetuskan atau fungsi panggil balik tidak digunakan walaupun menambahkan pendengar peristiwa peralihan akhir. Isu ini boleh diselesaikan dengan membungkus perubahan dengan setTimeout(1ms).

Penjelasan Penyelesaian

Sebab di sebalik tingkah laku ini terletak pada proses pemaparan penyemak imbas. Sebelum penyemak imbas boleh menggunakan peralihan CSS, ia mesti menggunakan gaya sebaris pada elemen terlebih dahulu. Jika elemen belum berada dalam DOM, paparan gaya pengiraannya ditetapkan kepada "".

Apabila gaya baharu ditetapkan, penyemak imbas belum lagi menggunakan gaya sebaris. Oleh itu, gaya pengiraan elemen kekal sebagai "", dengan nilai kiri dan atasnya masih pada 0px.

Oleh itu, apabila sifat peralihan digunakan sebelum cat bingkai seterusnya, nilai kiri dan atas sudah menjadi yang diingini satu, menyebabkan tiada peralihan untuk dilakukan dan tiada pencetus peristiwa peralihan tamat.

Untuk menyelesaikan isu ini, aliran semula boleh dipaksa menggunakan pengambil Element.offsetHeight atau kaedah DOM lain yang memerlukan gaya terkini . Ini memaksa penyemak imbas untuk mengemas kini gaya sebelum menggunakan peralihan, memastikan pelaksanaan yang lancar.

Contoh

Kod berikut menunjukkan isu dan penyelesaiannya:

<code class="html"><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></code>

<code class="js">document.body.innerHTML += tablehtml;

var animdiv = document.getElementById('spanky');
animdiv.addEventListener("transitionend", function(event) {
  animdiv.style.backgroundColor = 'red';
}, false);

// force a reflow
animdiv.offsetTop;

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

Dalam contoh ini, pengambil offsetTop elemen animdiv digunakan untuk memaksa aliran semula sebelum kedudukannya dikemas kini. Ini memastikan peralihan CSS dicetuskan dengan betul dan fungsi panggil balik digunakan.

Atas ialah kandungan terperinci Mengapakah peralihan CSS saya tidak memulakan atau mencetuskan fungsi panggil balik, dan bagaimana saya boleh membetulkannya menggunakan setTimeout?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!