jquery - TransitionEnd 事件未触发？

Question

我有多个元素，每个元素都以(某种程度上)持续时间进行动画处理。我使用 CSS3 转换动画，使用 jQuery 库和来自 David Walsh 的 transitionend 辅助函数.

我的问题是 transitionEnd 事件没有被触发! (在 Chrome 和 Firefox 中)

我的代码:

var $children = $container.find('.slideblock').children();

if(Modernizr.csstransitions && Modernizr.csstransforms3d) {

    if($.browser.webkit === true) {
        $children.css('-webkit-transform-style','preserve-3d')
    }

    $children.each(function(i){
        $(this).on(whichTransitionEvent,function () {
            $(this).remove();
        });
        $(this).show().css('animation','slideOutToRight ' + ((Math.random() / 2) + .5) + 's');
    });

}

更新

whichTransitionEvent 变量指向一个自执行函数，该函数返回一个包含事件名称的字符串:

var whichTransitionEvent = (function (){
    var t;
    var el = document.createElement('fakeelement');
    var transitions = {
      'transition'       :'transitionEnd',
      'OTransition'      :'oTransitionEnd',
      'MSTransition'     :'msTransitionEnd',
      'MozTransition'    :'transitionend',
      'WebkitTransition' :'webkitTransitionEnd'
    }

    for(t in transitions){
        if( el.style[t] !== undefined ){
            return transitions[t];
        }
    }
} ());

console.log(whichTransitionEvent);        // returns "webkitTransitionEvent" in Chrome
console.log(typeof whichTransitionEvent); // returns "string"

Answer 1

不要将“过渡”与“动画”混淆。

CSS 动画有不同的回调。

这是动画的回调:

 $(document).one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", 
                "#robot", 
    function (event)
    {
        // complete
    });