Mengapa Peralihan CSS Tidak Berfungsi dengan Peluncur Imej Responsif?

Memaksa Aliran Semula Penyemak Imbas semasa Perubahan CSS

Dalam mencipta peluncur imej responsif bukan jQuery bergantung pada peralihan CSS3, anda mungkin menghadapi isu di mana perubahan pada sifat CSS tidak mencetuskan animasi. Ini disebabkan oleh pengoptimuman penyemak imbas, yang memudahkan perubahan sifat dan melangkau animasi.

Untuk menyelesaikan masalah ini, anda perlu memaksa aliran semula penyemak imbas. Reflow ialah proses di mana penyemak imbas mengira semula reka letak elemen dan meletakkannya semula sebagai tindak balas kepada perubahan gaya.

Dalam coretan kod anda, anda menetapkan sifat peralihan kepada 'none 0s linear' sebelum membuat CSS awal berubah dan kemudian tukar semula kepada 'semua kemudahan 0.2s'. Walau bagaimanapun, pendekatan ini tidak mencetuskan aliran semula dan oleh itu tiada animasi berlaku.

Penyelesaian terletak pada permintaan secara eksplisit offsetHeight elemen selepas membuat perubahan CSS. Tindakan ini memulakan aliran semula dan memaksa penyemak imbas untuk mengakui dan menggunakan gaya yang diubah suai.

Kod untuk mencapai ini ialah:

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

Di mana 'elt' ialah elemen yang telah anda buat gaya berubah kepada. Memanggil 'reflow(elt)' selepas membuat perubahan CSS akan mencetuskan animasi yang diingini.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Tidak Berfungsi dengan Peluncur Imej Responsif?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!