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

偵測 CSS3 轉場和動畫的完成

使用 CSS3 動畫或轉場時，會出現一個常見的挑戰：決定動畫或何時完成。這些知識對於執行後續操作至關重要，例如從 DOM 中刪除元素。

在 jQuery 中，您可以選擇指定在動畫完成後發生「刪除」。但是，對於 CSS3 過渡或動畫，有一種特定的方法來檢測其端點。

過渡

對於過渡，jQuery 提供了一種監聽過渡結束的方法：

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

動畫

同樣，對於動畫，您可以使用：

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

請注意，您可以將所有以瀏覽器為前綴的事件字串傳遞到bind ()方法中，以確保跨多個瀏覽器支援該事件。

一次性事件處理

為了確保事件處理程序只觸發一次，可以使用jQuery 的one() method:

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

已棄用的方法

目前，jQuery 的bind() 方法已棄用，首選on() 方法。您也可以在回呼函數上使用 off() 來指定它只應被觸發一次。這是一個範例：

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

參考文獻

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

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