首頁 > web前端 > js教程 > 如何偵測 CSS3 轉換何時開始和結束?

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

Mary-Kate Olsen
發布: 2024-11-11 09:14:03
原創
741 人瀏覽過

How Do I Detect When CSS3 Transitions Start and End?

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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板