CSS3動畫可以觸發回調嗎？

CSS3 動畫可以觸發回調嗎？

與容易支援回呼的 JavaScript 動畫不同，CSS3 動畫最初缺乏此功能。不過，透過使用事件監聽器，現在可以實現 CSS3 動畫的回呼。

基於事件的回調實作

CSS3 實現回呼的關鍵就是將動畫辨識為可以監聽的事件。透過為相關 DOM 元素新增事件監聽器，您可以在動畫完成時執行回呼。

jQuery 事件綁定

使用jQuery，您可以將事件監聽器綁定到動畫元素如下：

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

這將事件偵聽器綁定到三種可能的事件類型： oanimationend、animationend 和webkitAnimationEnd。初始事件帶有供應商前綴，以確保與各種瀏覽器的兼容性。

純JavaScript 事件綁定

如果您不想使用jQuery，可以使用純JavaScript添加事件偵聽器：

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

此方法達到相同的結果，但使用本機JavaScript程式碼。

演示和瀏覽器相容性

此回調實現的現場演示可在 http://jsfiddle.net/W3y7h/ 上找到。請注意，雖然大多數現代瀏覽器支援這些事件類型，但始終建議在實現回呼時檢查跨瀏覽器相容性。

以上是CSS3動畫可以觸發回調嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！