CSS3動畫完成後如何觸發回調函數？

CSS3 動畫可以觸發回調函數嗎？

與 JavaScript 動畫不同，CSS3 動畫本身並不會提供直接執行回呼函數的機製完成。但是，有一個涉及利用事件偵聽器的解決方案。

使用JavaScript 框架實作

例如，使用jQuery，您可以附加事件偵聽器來擷取完成事件並呼叫回調函數：

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

使用Pure實作JavaScript

如果您喜歡使用純JavaScript，以下程式碼片段示範如何為不同的動畫結束事件新增事件偵聽器：

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

注意事項

請記住，瀏覽器對CSS3 動畫事件的支援各不相同。上面程式碼片段中使用的事件名稱覆蓋了廣泛的瀏覽器，確保了相容性。

演示

有關現場演示，請訪問此 JSFiddle：http:// /jsfiddle.net/W3y7h/

以上是CSS3動畫完成後如何觸發回調函數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！