Rumah >
hujung hadapan web >
tutorial js >
JavaScript menentukan penghujung animasi css3 fungsi panggil balik untuk kemahiran end_javascript animasi css3
JavaScript menentukan penghujung animasi css3 fungsi panggil balik untuk kemahiran end_javascript animasi css3
WBOY
Lepaskan: 2016-05-16 16:10:45
asal
1348 orang telah melayarinya
Dalam era css3, semuanya boleh dilakukan dengan css3--animasi
Js tradisional boleh menentukan sama ada animasi tamat melalui fungsi panggil balik walaupun teknologi CSS digunakan untuk menjana kesan animasi, JavaScript masih boleh menangkap peristiwa akhir animasi atau transformasi
Acara akhir peralihan dan acara akhir animasi ialah acara penyemak imbas standard, tetapi dalam penyemak imbas WebKit anda masih perlu menggunakan awalan webkit, jadi kami perlu mengesan peristiwa secara berasingan mengikut pelbagai penyemak imbas
(fungsi() {
var e = document.getElementsByClassName('sample')[0];
fungsi whichTransitionEvent(){
var t;
var el = document.createElement('fakeelement');
var peralihan = {
'peralihan':'tamat peralihan',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
}
untuk(t dalam peralihan){
Jika( el.style[t] !== undefined ){
peralihan kembali[t];
}
}
}
var transitionEvent = whichTransitionEvent();
transitionEvent && e.addEventListener(transitionEvent, function() {
alert('pergerakan css3 tamat! Saya adalah fungsi panggil balik dan tidak menggunakan perpustakaan pihak ketiga!');
});
StartFade = function() {
e.className = 'sembunyikan';
}
})();