如何使用 jQuery 檢測 CSS3 轉換和動畫的完成？

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

使用 CSS3 轉換元素可提供比傳統 JavaScript 技術更流暢的動畫。然而，在使用 CSS3 動畫時，出現了問題：如何確定過渡何時完成？

jQuery 為此需求提供了解決方案。要監視CSS3 過渡的結束，您可以使用以下語法綁定事件處理程序：

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

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

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

透過提供bind( ) 方法中所有以瀏覽器為前綴的事件字串，您可以確保跨瀏覽器的相容性

確保處理程序的單次執行

為了防止處理程序的重複執行，您可以使用jQuery 的.one() 方法。例如：

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

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

.bind() 方法的棄用

jQuery 的 bind() 方法已被棄用，取而代之的是 .on()。因此，您應該使用：

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

此方法還可以確保處理程序僅執行一次。

更多詳細信息，請參閱以下參考資料：

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

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