如何使用 jQuery 偵測 CSS3 轉換和動畫的結束？

使用jQuery 偵測CSS3 轉場和動畫的結束

在Web 開發過程中經常會出現在CSS 轉場和動畫完成時執行操作的情況。要使用 jQuery 實現這一目標，必須對這兩種動畫類型採取不同的方法。

處理轉換：

對於轉換，jQuery提供了一個方便的偵聽器來檢測結論過渡的：

$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

處理動畫：

同樣，對於動畫，存在類似的偵聽器：

$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

為了支援所有相容的瀏覽器，所有以瀏覽器為前綴的事件字串都可以傳遞給bind()同時方法。

一次性事件觸發：

為了確保處理程序只觸發一次，Duck 建議使用jQuery 的.one() 方法：

$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

$("#someSelector").one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });

使用現代jQuery 事件：

需要注意的是，bind() 在 jQuery 中已被棄用1.7.首選方法是 on()，要確保回調函數僅觸發一次，請使用 off()。

$("#someSelector")
.on("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
 function(e){
    // do something here
    $(this).off(e);
 });

透過理解這些方法，開發人員可以在 CSS3 轉換和動畫完成時有效地執行操作，從而允許以獲得更具響應性和身臨其境的網路體驗。

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