如何偵測 CSS3 過渡的開始和結束？

偵測 CSS3 過渡事件

CSS3 中的轉換為 Web 元素添加動態效果，從而增強其響應能力。但是，通常需要追蹤這些過渡的開始和結束，以便與其他元素或操作同步。

答案

W3C CSS 過渡草稿

W3C CSS 轉換轉換指定為每個屬性觸發事件完成事件經驗。此事件允許開發人員偵測轉換何時完成並執行同步操作。

Webkit

在 Webkit 中，可以為 webkitTransitionEnd 事件設定事件監聽函數。此事件在轉換結束時觸發。

box.addEventListener('webkitTransitionEnd', function( event ) { alert( "Finished transition!" ); }, false );

Mozilla、Opera 和Internet Explorer

這些瀏覽器支援相同的Transitionend 事件，但可能對於Opera，前綴為「o」；對於Internet Explorer ，前綴為“webkit”。該事件在轉換完成時發生。

有關 CSS 轉換事件及其跨瀏覽器相容性的更多信息，請參閱 Stack Overflow 上有關規範化 CSS3 轉換函數的討論。

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