title: TransitionEnd Event not firing?
body: <p>I have multiple elements that are animating at a (somewhat) duration each. I'm animating using CSS3 transitions, using the jQuery library and a <code>transitionend</code> helper function from <a href="https://davidwalsh.name/css-animation-callback" rel="noreferrer">David Walsh</a>.</p>
  
  <p>My issue is that the <code>transitionEnd</code> event is NOT being fired! (In Chrome &amp; Firefox)</p>
  
  <p>My code:</p>
  
  <pre><code>var $children = $container.find('.slideblock').children();
  
  if(Modernizr.csstransitions &amp;&amp; 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');
      });
  
  }
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>The <code>whichTransitionEvent</code> variable points to a self-executing function that returns a string containing the event name:</p>
  
  <pre><code>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"
  </code></pre>