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);