jQuery 如何偵測 CSS3 轉換和動畫的完成？

使用 jQuery 偵測 CSS3 轉換和動畫的完成

在 Web 開發中，通常需要在 CSS 轉換或動畫已經完成。然而，確定這些動畫的確切結束可能很棘手。本文將示範如何使用 jQuery 偵測過渡和動畫的完成，確保對 DOM 操作的精確控制。

Transitions

偵測動畫的結束透過jQuery 進行CSS 轉換，使用以下語法：

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

這將事件處理程序綁定到指定元素，該元素在以下情況下觸發發生任何受支援的過渡結束事件。

動畫

對於CSS 動畫，使用類似的方法：

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

確保一次性觸發🎜>

確保一次觸發🎜>

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

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

確保一次性觸發🎜>為了防止事件處理程序多次執行，使用jQuery 的.one() 方法。這可確保處理程序僅觸發一次，之後會自動刪除：

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

jQuery 方法棄用

請注意，.bind() 方法已被棄用在jQuery 1.7 中。使用 .on() 代替：

此等效程式碼使用 .off() 來有效模仿 .one() 的行為。

• 參考文獻：

[jQuery 關閉函數](https://api.jquery.com/off/)[ jQuery 一個函數](https://api.jquery.com/one/)

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