Mengapa Peralihan CSS Saya Kadangkala Gagal Bergerak?

Memahami Isu Aliran Semula CSS dalam Peralihan Penyemak Imbas

Dalam mencipta peluncur imej responsif menggunakan peralihan CSS3, cabaran biasa timbul apabila cuba mencetuskan animasi apabila sifat CSS diubah suai. Walaupun memulakan sifat peralihan, penyemak imbas mungkin mengabaikan perubahan dan tidak melaksanakan animasi yang dikehendaki.

Penyelesaian: Memaksa Aliran Semula untuk Mencetuskan Animasi

Penyelesaian kepada isu ini terletak pada memaksa aliran semula penyemak imbas, yang mengira semula reka letak dan pemaparan halaman. Ini boleh dicapai dengan mengakses sifat offsetHeight elemen. Fungsi JavaScript berikut melaksanakannya:

function reflow(elt) {
  console.log(elt.offsetHeight);
}

Pelaksanaan:

Untuk melaksanakan penyelesaian, panggil fungsi reflow() selepas mengubah suai sifat CSS yang mencetuskan animasi . Contohnya:

ul.style.transition = 'none 0s linear';
ul.style.left = '-600px';
ul.style.transition = 'all 0.2s ease-out';
reflow(ul); // Forces a reflow
ul.style.left = '0px';

Nota:

Pengoptimuman terkini melibatkan penggantian console.log(elt.offsetHeight) dengan void(elt.offsetHeight), sebagai pengoptimum kurang berkemungkinan mengabaikan kenyataan ini sebagai kesan sampingan yang berpotensi.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Saya Kadangkala Gagal Bergerak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!