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

利用CSS3 轉換：使用jQuery 偵測完成

使用CSS3 轉換為元素設定動畫時，有必要知道它們結束的準確時刻執行後續操作。與 jQuery 動畫不同，CSS3 過渡沒有內建完成回呼。

捕獲過渡結束事件

為了偵測過渡的結束，jQuery 提供了以下功能腳本：

<code class="javascript">$("#someSelector").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });</code>

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

<code class="javascript">$("#someSelector").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ ... });</code>

透過傳遞所有帶有前綴的事件字串，此腳本將在多個瀏覽器上運行。

使用.one() 進行單次觸發

為了確保事件處理程序僅觸發一次，您可以使用jQuery 的.one() 方法而不是.bind ():

<code class="javascript">$("#someSelector").one("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){ ... });

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

棄用和現代方法

jQuery 的.bind() 方法現已棄用。首選方法是 .on()，它與 .off() 結合使用。這是一個範例：

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

此方法確保回呼函數只執行一次。

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