queue transitions for synchronous firing

transitionqueue.js

  // http://davidwalsh.name/vendor-prefix
  var prefix = (function () {
    var styles = window.getComputedStyle(document.documentElement, ''),
      pre = (Array.prototype.slice
        .call(styles)
        .join('')
        .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
      )[1],
      dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
    return {
      dom: dom,
      lowercase: pre,
      css: '-' + pre + '-',
      js: pre[0].toUpperCase() + pre.substr(1)
    };
  })();

  var transitionEnd = (function () {
    var i,
        undefined,
        el = document.createElement('div'),
        transitions = {
            'transition':'transitionend',
            'OTransition':'otransitionend',
            'MozTransition':'transitionend',
            'WebkitTransition':'webkitTransitionEnd'
        };

      for (i in transitions) {
          if (transitions.hasOwnProperty(i) && el.style[i] !== undefined) {
              return transitions[i];
          }
      }
  })()
  var nextTransition = function() {
    var event = document.createEvent('Event')
    event.initEvent('nexttransition', true, true);

    return event;
  }

  var nextInQueue = function (props) {
    props.el.addEventListener(transitionEnd, function cb (e){
      document.dispatchEvent(nextTransition());
    });
    if ( props.remove ) {
      props.el.classList.remove(props.className);
    } else {
      props.el.classList.add(props.className);
    }
  }

  // expects an array of objects like:
  // {
  //  el: dom Object
  //  className: foo,
  //  hasTransition: false,
  //  remove: true (optional)
  // }
  var queueTransitions = function (queue, cb) {
    var i = 0;
    document.addEventListener('nexttransition', function nextStep (e){
      i++;
      var step = queue[i];
      if (step && step.hasTransition) {
        nextInQueue(step)
      } else if (step) {
        if ( step.remove ) {
          step.el.classList.remove(step.className);
        } else {
          step.el.classList.add(step.className);
        }
        document.dispatchEvent(nextTransition());
      } else {
        document.removeEventListener('nexttransition', nextStep);
        if (cb) {
          cb.call(this);
        }
      }

    }, false);

    nextInQueue(queue[i]);
  }