Событие TransitionEnd не срабатывает?

у меня есть несколько элементов, которые анимируются на (несколько) продолжительности каждый. Я анимирую с помощью переходов 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"
6
css3 jquery

3 ответов

попытка повторить это в Chrome 29 и Firefox 23, ваша исходная функция не удалась таким же образом, т. е. я вижу console.log(whichTransitionEvent) возвращение 'transitionEnd' для обоих.

переупорядочивание элементов в transitions хэш устраняет проблему, предполагая, что оба имеют свойство unprefixed standards, а также их собственный префикс.

рефакторинг функции ниже, которое запускает правильные события для меня:

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

Дайте мне знать, если это помогает

6

Не путайте "переходы" с "анимацией".

CSS анимации имеют различные функции.

вот обратные вызовы для анимации:

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

вы передаете функцию вместо строки, поэтому вы делаете эквивалент...

$(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');
    });

}
-1