TransitionMixin

'use strict';

var merge = require('../vendor/merge');

var TransitionMixin = {

  transitionStart: function(opt) {
    var self = this;
    return new Promise(function(resolve) {
      opt.transition = 'all ' + opt.duration + ' linear';
      self.transitionStyle = opt;
      self.forceUpdate();
      self.__oldTransitionStyle = opt;
      resolve();
    });
  },

  transition: function(opt) {
    var self = this;
    var domNode = self.getDOMNode();
    return function() {
      return new Promise(function(resolve, reject) {
        function transitionEnd(e) {
          if (e.target !== self.getDOMNode()) {
            return;
          }

          domNode.removeEventListener('transitionend', transitionEnd);


          requestAnimationFrame(resolve);
        }

        // fugly but for now it works :-P
        opt.transition = 'all ' + opt.duration + ' linear';
        self.transitionStyle = merge(self.__oldTransitionStyle || {}, opt);
        domNode.addEventListener('transitionend', transitionEnd);
        requestAnimationFrame(function() {
          self.forceUpdate()
        });

        self.__oldTransitionStyle = opt;
      });
    }
  }

};

module.exports = TransitionMixin;

Usage:

  Promise.all([
        fab1.transitionStart({position:'relative', left: 0, top: '20px',  duration: '2s'}),
        fab2.transitionStart({position:'relative', left: 0, top: '20px',  duration: '2s'})
      ]).
        then(
          Promise.
            all([
              fab1.transition({top: '400px', duration: '3s'})(),
              fab2.transition({left: '400px', duration: '3s'})()
            ])
            .then(fab1.transition({top: '100px', duration: '.4s'}))
            .then(fab2.transition({top: '20px', left: '40px', duration: '.4s'})));