如何在 jQuery 中偵測 CSS3 轉換和動畫的結束？

在jQuery 中監控CSS3 轉換和動畫的完成

在Web 開發中，通常需要淡出一個元素，然後將其從動畫完成時的DOM。雖然這對於 jQuery 的動畫功能來說很簡單，但將其擴展到 CSS3 過渡需要一種機制來檢測其結論。

幸運的是，jQuery 提供了解決此問題的途徑：

過渡

要透過jQuery 檢測CSS 轉換的結束，請使用以下事件綁定器：

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

Mozilla 在https://developer.mozilla.org/en上對此進行了進一步詳細說明-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Detecting_the_start_and_com pletion_of_a_transition

動畫

對於動畫，方法類似：

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

需要注意的關鍵一點是，透過同時對所有以瀏覽器為前綴的事件字串使用bind() 方法，您可以確保支援所有具有此功能的瀏覽器。

最佳化事件處理

要將處理程序觸發限制為一次，請使用jQuery 的.one() 方法，如下所示：

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

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

方法棄用與現代替代方案

值得承認的是，從 jQuery 1.7 開始，jQuery 的 bind() 方法已被棄用，取而代之的是 on() 方法。此外，您可以利用回呼函數中的 off() 方法來確保一次性執行，如下例所示：

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

此方法與使用 one()方法有相同的效果.

其他資源

• [.off()](https://api.jquery.com/off/)
• [.one()](https://api.jquery.com/one/)

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