CSS3 Transition functions

09.08.2015

Проверяем, закончилась ли CSS3 анимация элемента при помощи jQuery:

function transitionEndEventName () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',  // oTransitionEnd in very old Opera
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

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

    //TODO: throw 'TransitionEnd event is not supported in this browser'; 
}

  function on_animation_end(fn)
  {  
    var self = $('div');
    var transitionEnd = transitionEndEventName();
    // Wait for the animation to finish
    self.addEventListener(transitionEnd, function( event )
    {
      self.removeEventListener(transitionEnd, arguments.callee, false);
      fn.call(self);
    }, false );
  }