Bagaimanakah Saya Boleh Mengesan Penyiapan Peralihan CSS Merentasi Penyemak Imbas dengan Amanah?

Peralihan CSS Dipacu Peristiwa: Mengesan Penyelesaian Peralihan

Apabila bekerja dengan peralihan CSS, selalunya wajar untuk menerima pemberitahuan apabila peralihan telah selesai. Nasib baik, penyemak imbas moden menyediakan peristiwa yang mencetuskan apabila peralihan tamat, memudahkan pelaksanaan fungsi panggil balik.

Nama Acara Merentasi Penyemak Imbas

Nama acara khusus untuk pelengkapan peralihan berbeza-beza mengikut pelayar:

• Webkit (Chrome, Safari): webkitTransitionEnd
• Firefox: transitionend
• IE9 : msTransitionEnd
• Opera: oTransitionEnd

Melaksanakan Pengendalian AcaraUntuk melaksanakan fungsi panggil balik apabila Peralihan CSS selesai, ikut langkah berikut:

Tentukan nama peristiwa peralihan yang sesuai untuk penyemak imbas yang digunakan.

1. Tambahkan pendengar acara pada elemen yang menjalani peralihan:

elemToAnimate.addEventListener(transitionEndEventName, transitionEnded);

Tentukan fungsi panggil balik transitionEnded untuk melaksanakan tindakan yang diingini apabila peralihan selesai.

3. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa acara webkitTransitionEnd tidak sentiasa menyala secara konsisten. Untuk mengambil kira perkara ini, adalah disyorkan untuk menetapkan tamat masa untuk memanggil pengendali acara jika ia tidak mencetuskan seperti yang dijangkakan.

Tamat Masa Sandar

Dengan menggabungkan sandaran tamat masa, anda boleh memastikan bahawa panggilan balik dilaksanakan walaupun acara peralihan tidak kebakaran.

setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, requiredTimeForAnimation);

Mendapatkan Nama Peristiwa Peralihan

Kaedah yang digariskan dalam jawapan kepada soalan "Bagaimanakah saya menormalkan fungsi Transisi CSS3 merentas pelayar?" boleh digunakan untuk menentukan nama peristiwa peralihan yang disokong oleh penyemak imbas semasa.

Sumber Tambahan

Mengendalikan Peralihan dengan CSS3
Acara peralihan CSS3

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mengesan Penyiapan Peralihan CSS Merentasi Penyemak Imbas dengan Amanah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!