Apakah ada panggilan balik saat menyelesaikan animasi CSS3?

Apakah ada cara untuk mengimplementasikan fungsi callback dalam kasus animasi css3? Dalam kasus animasi Javascript itu mungkin tetapi tidak menemukan cara untuk melakukannya di css3.

Salah satu cara yang bisa saya lihat adalah mengeksekusi callback setelah durasi animasi tetapi itu tidak memastikan bahwa itu akan selalu dipanggil tepat setelah animasi berakhir. Ini akan tergantung pada antrian UI browser. Saya ingin metode yang lebih kuat. Ada petunjuk?

javascript css frontend

— mengubah
sumber

kemungkinan duplikat Callback pada transisi CSS

— diberikan

Jika Anda ingin melakukan tindakan CSS sederhana, misalnya menyembunyikan elemen setelah transisi, mungkin Anda tidak perlu melakukan panggilan balik dan sebaliknya, Anda dapat menyelesaikan masalah Anda dengan bingkai utama animasi.

— Madmadi

Jawaban:

132

Ya ada. Callback adalah sebuah event, jadi Anda harus menambahkan event listener untuk menangkapnya. Ini adalah contoh dengan jQuery:

$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

Atau js murni:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

Demo langsung: http://jsfiddle.net/W3y7h/

— metode aksi
sumber

Untuk IE10 ini adalah 'MSAnimationEnd' (lihat msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )

— Martin Wittemann

Ini transitionend, tidak animationend.

@MichaelJones tidak, itu untuk transisi css3. pertanyaannya adalah tentang animasi.

— joshvermaire

@MartinWittemann IE10 final sekarang menggunakan animationend msdn.microsoft.com/en-us/library/ie/… . @Husky kode tersebut berfungsi di Chrome dan FF 14, lihat biola yang diperbarui jsfiddle.net/W3y7h

— methodofaction

Duplikat stackoverflow.com/questions/9255279/… yang memiliki solusi lebih lengkap

— vanthome

Cara mudah bagi Anda untuk melakukan panggilan balik yang juga menangani transisi CSS3 / kompatibilitas browser adalah dengan jQuery Transit Plugin . Contoh:

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

Demo JS Fiddle

— ROFLwTIME
sumber

Poin bonus untuk berbagi spesifikasi API dengan jQuery animate, tetapi masih memanfaatkan kelancaran animasi CSS yang dirender perangkat keras. Kami baru saja mengganti jQuery animate di semua tempat dengan ini.

— logan