'use strict';


let animate = (function() {

  function ActiveState() {
    this.propertyCount = 0;
    this.callbackList = [];
  }

  /**
   * @return boolean True when all properties end.
   */
  ActiveState.prototype.processTransitionEnd = function() {
    if (--this.propertyCount > 0) return false;
    while (this.callbackList.length > 0) {
      this.callbackList.splice(0, 1)[0].call(null);
    }
    el.style.removeProperty('transition');
    return true;
  };

  let activeMap = {};
  function animate(el, styles, callback) {
    let uid = getUid(el);
    let active = activeMap[uid] = activeMap[uid] || new ActiveState();
    active.callbackList.push(callback);
    el.style.setProperty('transition', '.4s');
    for (var k in styles) {
      el.style.setProperty(k, styles[k]);
      active.propertyCount++;
    }
  }

  var uidCounter = 0;
  function getUid(el) {
    return el.uid_ || (el.uid_ = 'uid:' + uidCounter++);
  }

  window.addEventListener('transitionend', e => {
    let uid = getUid(e.target);
    let active = activeMap[uid];
    if (!active) return;
    if (active.processTransitionEnd())
      activeMap[uid] = null;
  });

  return animate;
})();


let item = document.getElementById('item');
item.addEventListener('click', e => {
  animate(e.target, {
    'transform': 'translate3d(0, 400px, 100px)',
    'opacity': '0.4'
  }, () => console.log('done.'));
});