CSS轉換回調

Question

CSS轉換完成後是否可以獲得通知（如回調）？

Answer 1

我知道Safari實現了一個webkitTransitionEnd回調函數，您可以直接附加到具有轉換的元素。

他們的例子（重新格式化，以多行）：

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

Answer 2

是的，如果這樣的事情是由瀏覽器支持的，則事件被轉換完成時觸發。實際的事件然而，瀏覽器之間的區別：

• Webkit的瀏覽器（Chrome瀏覽器，Safari瀏覽器）使用webkitTransitionEnd
• Firefox使用transitionend
• IE9 +採用msTransitionEnd
• Opera使用oTransitionEnd

但是你應該知道，webkitTransitionEnd並不總是會發射！這引起了我很多次，並且如果動畫對元素沒有影響似乎就會發生。爲了解決這個問題，在未按預期觸發的情況下，使用超時來觸發事件處理程序是有意義的。關於這個問題的博客文章，請訪問：http://www.cuppadev.co.uk/the-trouble-with-css-transitions/< - 500內部服務器錯誤

考慮到這一點，我傾向於使用的代碼塊這個事件，看起來有點像這樣：

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) 

注：獲得的過渡事件結束的名字，你可以使用張貼在答案的方法： How do I normalize CSS3 Transition functions across browsers?。

注意：這個問題也涉及到： - CSS3 transition events

Answer 3

的jQuery.transit plugin，對CSS3轉換和過渡的一個插件，可以從腳本中調用你的CSS動畫，並給您一個回調。

Answer 4

我正在使用下面的代碼，比試圖檢測瀏覽器使用哪個特定的結束事件要簡單得多。

$(".myClass").one('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
function() { 
//do something 
}); 

---

另外，如果你使用引導程序，那麼你可以簡單地做

$(".myClass").one($.support.transition.end, 
function() { 
//do something 
}); 

這是監守它們包括bootstrap.js以下

+function ($) { 
    'use strict'; 

    // CSS TRANSITION SUPPORT (Shoutout: http://www.modernizr.com/) 
    // ============================================================ 

    function transitionEnd() { 
    var el = document.createElement('bootstrap') 

    var transEndEventNames = { 
     'WebkitTransition' : 'webkitTransitionEnd', 
     'MozTransition' : 'transitionend', 
     'OTransition'  : 'oTransitionEnd otransitionend', 
     'transition'  : 'transitionend' 
    } 

    for (var name in transEndEventNames) { 
     if (el.style[name] !== undefined) { 
     return { end: transEndEventNames[name] } 
     } 
    } 

    return false // explicit for ie8 ( ._.) 
    } 

    // http://blog.alexmaccaw.com/css-transitions 
    $.fn.emulateTransitionEnd = function (duration) { 
    var called = false, $el = this 
    $(this).one($.support.transition.end, function() { called = true }) 
    var callback = function() { if (!called) $($el).trigger($.support.transition.end) } 
    setTimeout(callback, duration) 
    return this 
    } 

    $(function() { 
    $.support.transition = transitionEnd() 
    }) 

}(jQuery);