Có cách nào để triển khai hàm gọi lại trong trường hợp hoạt ảnh css3 không? Trong trường hợp hoạt ảnh Javascript có thể xảy ra nhưng không tìm thấy bất kỳ cách nào để làm điều đó trong css3.
Một cách tôi có thể thấy là thực hiện gọi lại sau thời lượng hoạt ảnh nhưng điều đó không đảm bảo rằng nó sẽ luôn được gọi ngay sau khi hoạt ảnh kết thúc. Nó sẽ phụ thuộc vào hàng đợi giao diện người dùng của trình duyệt. Tôi muốn một phương pháp mạnh mẽ hơn. Có manh mối nào không?
Câu trả lời:
Có, có. Cuộc gọi lại là một sự kiện, vì vậy bạn phải thêm một bộ nghe sự kiện để bắt nó. Đây là một ví dụ với jQuery:
$("#sun").bind('oanimationend animationend webkitAnimationEnd', function() {
alert("fin")
});Hoặc js thuần túy:
element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);Bản demo trực tiếp: http://jsfiddle.net/W3y7h/
animationend msdn.microsoft.com/en-us/library/ie/… . @Husky mã làm việc trong Chrome và FF 14, xem cập nhật fiddle jsfiddle.net/W3y7h
Một cách dễ dàng để bạn thực hiện một cuộc gọi lại cũng xử lý các chuyển đổi CSS3 / khả năng tương thích của trình duyệt sẽ là Plugin jQuery Transit . Thí dụ:
//Pulsing, moving element
$("#element").click( function () {
$('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});