TransitionEnd事件没有触发？

Question

我有多个元素，在一个(有点)的持续时间，每个动画。我正在使用CSS3转换、使用jQuery库和来自大卫·沃尔什的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

试图在Chrome 29和Firefox 23中复制这一功能，您的原始功能也以同样的方式失败了，也就是说，我看到console.log(whichTransitionEvent)为两者返回了'transitionEnd'。

重新排序transitions哈希中的元素可以解决这个问题，这意味着两者都具有无前缀的标准属性以及它们自己的前缀属性。

下面是重构函数，它为我触发正确的事件：

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

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

如果这对我有帮助，请告诉我

Answer 2

不要混淆“转换”和“动画”。

CSS动画有不同的回调。

下面是动画的回调：

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

Answer 3

你传递的是一个函数而不是一个字符串，所以你做的相当于.

$(this).on(function(){...}, function() {...})

为了解决这个问题，我建议在脚本开头设置字符串，这样它就不会被多次调用。

if(Modernizr.csstransitions && Modernizr.csstransforms3d) {
    var transitionEnd = whichTransitionEvent();
    if($.browser.webkit === true) {
        $children.css('-webkit-transform-style','preserve-3d')
    }

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

}