Mengapa Peralihan CSS Saya Tidak Berfungsi Dengan Gaya Sebaris dan Bagaimana Saya Membetulkannya?

Peralihan CSS Tidak Dimulakan atau Panggilan Balik Tidak Dipanggil

Masalah:

Dalam projek permainan berasaskan JavaScript, percubaan untuk menggantikan animasi jQuery dengan peralihan CSS untuk pergerakan peluru terbukti tidak berjaya. Peralihan melangkau atau tidak mencetuskan panggilan balik, walaupun dengan penggunaan kelewatan setTimeout.

Penjelasan:

Tingkah laku ini berlaku kerana penyemak imbas belum digunakan gaya CSS sebaris sebelum ia menggunakan sifat peralihan. Apabila gaya baharu ditetapkan, gaya pengiraan elemen masih mempunyai nilai lalai untuk paparan, kiri dan kedudukan atas.

Memandangkan nilai kiri dan atas kekal pada 0px (nilai lalainya), peralihan tiada kaitan kerana nilai sepadan dengan yang ditetapkan dalam gaya baharu. Untuk membetulkan ini, aliran semula penyemak imbas mesti dipaksa untuk mengemas kini gaya sebelum menggunakan peralihan.

Penyelesaian:

Untuk memaksa aliran semula penyemak imbas, gunakan Element.offsetHeight pengambil. Contohnya:

<code class="js">// Assume animdiv is the element you want the transition to work on
animdiv.offsetTop;
// Now animdiv has all inline styles set

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

Langkah ini memastikan gaya pengiraan elemen adalah terkini dan peralihan akan digunakan seperti yang dijangkakan.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Saya Tidak Berfungsi Dengan Gaya Sebaris dan Bagaimana Saya Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!