如何偵測 CSS3 轉換何時開始和結束？

CSS3 過渡事件

CSS3 過渡提供了一種向網頁添加動畫和效果的無縫方式。然而，為了有效地控制和同步這些動畫，必須知道它們何時開始和結束。輸入 CSS3 過渡事件。

事件類型

根據您使用的瀏覽器，CSS3 過渡開始或結束時會觸發不同的事件：

• W3C CSS轉換草稿：

  • transitionstart（開始）
  • transitionend（結束）
• Web

  🎜 >

  webkitTransitionEnd （結束）
• Mozilla:
  transitionend （結束）
• 歌劇：
  oTransitionEnd （結束）

網路Explorer:

transitionend（結束）

監聽事件監聽CSS3 過渡事件，您需要可以使用JavaScript事件監聽器：

Browser	Transition Start Event	Transition End Event
W3C CSS Transitions Draft	Yes	Yes
Webkit	No	Yes
Mozilla	No	Yes
Opera	No	Yes
Internet Explorer	No	Yes

瀏覽器相容性

CSS3 轉換事件的可用性因瀏覽器而異。請參閱下表以了解相容性資訊：

使用範例以下程式碼示範如何使用transitionend來監聽CSS3轉換的完成： 當當您將滑鼠懸停在#box 元素上時，過渡會將寬度平滑地設定為200px。當轉換完成時，transitionend 事件將會被觸發。

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