Bagaimanakah Saya Boleh Mendapat Pemberitahuan Apabila Peralihan CSS Selesai Merentasi Pelayar Berbeza?

Pemberitahuan untuk Penyelesaian Peralihan CSS

Apabila peralihan CSS berakhir, adalah penting untuk menerima pemberitahuan untuk memulakan tindakan pasca peralihan. Nasib baik, penyemak imbas menyediakan peristiwa yang mencetuskan selepas peralihan selesai, membenarkan pembangun mendaftarkan fungsi panggil balik.

Nama Acara Khusus Penyemak Imbas

Walau bagaimanapun, penyemak imbas menggunakan nama acara yang bergantung kepada penyemak imbas:

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

webkitTransitionEnd tidak mungkin ada Jebakan

webkitTransitionEndContoh Kod

Kod berikut menunjukkan penggunaan acara ini:

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

Nota Keserasian Penyemak Imbas

Untuk menentukan nama peristiwa peralihan yang sesuai untuk penyemak imbas tertentu, gunakan kaedah diserlahkan dalam "Bagaimana cara saya menormalkan fungsi Transisi CSS3 merentas penyemak imbas?".

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mendapat Pemberitahuan Apabila Peralihan CSS Selesai Merentasi Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!