如何使用 jQuery 偵測 CSS3 轉換和動畫的完成情況？

使用 jQuery 等待 CSS3 轉換

使用 CSS3 轉換為元素添加動畫時，確定動畫何時完成可能會很困難。與允許在動畫完成時回呼的 jQuery 動畫不同，CSS3 過渡不提供這樣的機制。不過，有一個使用 jQuery 的解決方案。

偵測轉換完成

jQuery 提供了可用於偵測 CSS3 轉換結束的事件偵聽器。這些監聽器是：

• transitionend
• webkitTransitionEnd
• oTransitionEnd
• MSTransitionEnd
oTransitionEnd

MSTransition這些事件在您想要追蹤的選擇器上使用bind()方法。例如：

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

偵測動畫完成

與過渡類似，也可以使用 jQuery事件來偵測動畫聽眾：

• animationend
• webkitAnimationEnd
• oAnimationEnd
• M SAnimationEnd

使用bind()方法作為before:

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

一次性事件觸發

要確保事件處理程序僅觸發一次，請使用jQuery 的.one() 方法：

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    // Code to execute when the transition ends
});

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){
    // Code to execute when the animation ends
});

最佳實踐

• 將所有以瀏覽器為前綴的事件字串傳遞到bind()方法中以支援所有瀏覽器。
• 使用 .one() 來防止處理程序多次觸發。
• jQuery 的 bind() 方法已棄用；從版本 1.7 開始，首選 on()。
• 或者，在事件觸發後使用 off() 分離回調，以確保它只觸發一次。

以上是如何使用 jQuery 偵測 CSS3 轉換和動畫的完成情況？的詳細內容。更多資訊請關注PHP中文網其他相關文章！