TransitionEnd事件未触发? [英] TransitionEnd Event not firing?

问题描述

我有多个元素(每个)都在(大约)持续时间进行动画处理.我正在使用CSS3过渡进行动画处理，使用jQuery库和 David Walsh .

I have multiple elements that are animating at a (somewhat) duration each. I'm animating using CSS3 transitions, using the jQuery library and a transitionend helper function from David Walsh.

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

My issue is that the transitionEnd event is NOT being fired! (In 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变量指向一个自执行函数，该函数返回包含事件名称的字符串:

The whichTransitionEvent variable points to a self-executing function that returns a string containing the event name:

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"

推荐答案

尝试在Chrome 29和Firefox 23中复制此代码，您的原始功能以相同的方式失败，即我看到console.log(whichTransitionEvent)返回'transitionEnd'两个都.

Attempting to replicate this in Chrome 29 and Firefox 23, your original function failed in the same way, i.e. I'm seeing console.log(whichTransitionEvent) returning 'transitionEnd' for both.

对transitions哈希中的元素重新排序可解决此问题，表明这两个元素均具有未前缀的standard属性以及它们自己的前缀属性.

Re-ordering the elements within the transitions hash fixes the issue, suggesting both have the unprefixed standards property as well as their own prefixed one.

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

Refactored function below, which fires the correct events for me:

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];
    }
  }
}

让我知道这是否有帮助

这篇关于TransitionEnd事件未触发?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！