當 CSS 轉換在不同瀏覽器之間完成時，如何收到通知？

CSS 轉換完成的通知

CSS 轉換結束時，接收啟動轉換後操作的通知非常有價值。幸運的是，瀏覽器提供了在轉換完成時觸發的事件，允許開發人員註冊回呼函數。

瀏覽器特定的事件名稱

但是，瀏覽器使用依賴瀏覽器的事件名稱：

• Webkit 瀏覽器（Chrome、Safari）：webkitTransitionEnd
• Firefox： transitionend
• IE9 : msTransitionEnd
• Opera: oTransitionEnd

webkitTransitionEnd 陷阱

請注意，webkitTransitionEnd 可能並不總是觸發，特別是當動畫效果沒有對元素有明顯的影響。為了緩解這種情況，如果事件處理程序未如預期觸發，請使用逾時來執行該事件處理程序。

程式碼範例

以下程式碼示範了此事件的用法：

var transitionEndEventName = "XXX"; //figure out, e.g. "webkitTransitionEnd".. 
var elemToAnimate = ... //the thing you want to animate..
var done = false;
var transitionEnded = function(){
     done = true;
     //do your transition finished stuff..
     elemToAnimate.removeEventListener(transitionEndEventName,
                                        transitionEnded, false);
};
elemToAnimate.addEventListener(transitionEndEventName,
                                transitionEnded, false);

//animation triggering code here..

//ensure tidy up if event doesn't fire..
setTimeout(function(){
    if(!done){
        console.log("timeout needed to call transition ended..");
        transitionEnded();
    }
}, XXX); //note: XXX should be the time required for the
        //animation to complete plus a grace period (e.g. 10ms) 

瀏覽器相容性說明

要確定特定瀏覽器的適當轉換事件名稱，請使用「如何標準化CSS3 跨瀏覽器轉換功能？」。

以上是當 CSS 轉換在不同瀏覽器之間完成時，如何收到通知？的詳細內容。更多資訊請關注PHP中文網其他相關文章！