title: A "transitionend" event that always fires, and once only
body: <p>I need a special <code>transitionend</code>-like event that fires once after all transitions are complete, or fires immediately if there are no transitions defined in the CSS.</p>
  
  <p>This what I've come up so far:</p>
  
  <pre><code>(function($){
  
    $.event.special.transitionsComplete = {
  
      setup: function(data, namespaces, eventHandle){    
        var queue = [],
            style = window.getComputedStyle(this, null),
            computedProps = style.getPropertyValue('transition-property').split(', '),
            computedDurations = style.getPropertyValue('transition-duration').split(', '),
            $node = $(this);          
  
        // only count properties with duration higher than 0s
        for(var i = 0; i &lt; computedDurations.length; i++)
          if(computedDurations[i] !== '0s')
            queue.push(computedProps[i]);           
  
        // there are transitions
        if(queue.length &gt; 0){
          $node.on('webkitTransitionEnd.x transitionend.x', function(e){          
            queue.splice(queue.indexOf(e.originalEvent.propertyName));          
            if(queue.length &lt; 1)
              $node.trigger('transitionsComplete');
          });
  
        // no transitions, fire (almost) immediately
        }else{
          setTimeout(function(){
            $node.trigger('transitionsComplete');
          }, 5);
  
        }
  
      },
  
      teardown: function(namespaces){
        $(this).off('.x');
      }
  
    };
  })(jQuery);
  </code></pre>
  
  <p>I've made a live example <a href="http://jsfiddle.net/nf8gvbuo/">here</a>.</p>
  
  <p>The only issue is that it only works if the element itself has transition properties, ignoring transitions from children elements. If I switch <code>transitionsComplete</code> to <code>transitionend</code> both the parent and child event handlers are run after the child transition finishes. Is there some way, or perhaps a better approach to determine if an element has transitions happening to it or its children? I'd like to avoid going through the children manually and checking their transitions properties, if possible. (That wouldn't be reliable anyway, because even if some children have transitions, it doesn't mean they would be active at that point)</p>