Rumah > hujung hadapan web > tutorial css > Bagaimanakah Saya Boleh Mendapat Pemberitahuan Apabila Peralihan CSS Selesai Merentasi Pelayar Berbeza?

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

DDD
Lepaskan: 2024-11-28 08:00:14
asal
565 orang telah melayarinya

How Can I Get Notifications When CSS Transitions Finish Across Different Browsers?

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) 
Salin selepas log masuk
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!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan