composing transitions in liquid-fire

app_transitions_concurrent.js

import { Promise } from 'liquid-fire';
import { animationFor } from '../utils/transition-helpers';

// `concurrent` is not, by itself, an animation. It exists to run two or more
// transitions concurrently.

export default function concurrent(...transitions) {
  return Promise.all(transitions.map((transition) => {
    return runAnimation(this, transition);
  }));
}

function runAnimation(context, transition) {
  return animationFor(context, transition).call();
}

app_transitions_sequence.js

import { Promise } from 'liquid-fire';
import { animationFor } from '../utils/transition-helpers';

// Sequence is not, by itself, an animation. It exists to run two or more
// transitions one after the other.

export default function sequence(...transitions) {
  return executeInSequence(transitions.map((transition) => {
    return animationFor(this, transition);
  }));
}

// tasks must be array of callables which return promises
function executeInSequence(tasks) {
  var length = tasks.length;
  var current = Promise.resolve();
  var results = new Array(length);

  for (var i = 0; i < length; ++i) {
    current = results[i] = current.then(tasks[i]);
  }

  return Promise.all(results);
}

app_utils_transition-helpers.js

import Ember from 'ember';

export function animationFor(context, transition) {
  var name, args, func;
  if (Ember.isArray(transition) ) {
    name = transition[0];
    args = transition.slice(1);
  } else {
    name = transition;
    args = [];
  }
  if (typeof name === 'function') {
    func = name;
  } else {
    func = context.lookup(name);
  }
  return function() {
    return func.apply(context, args);
  };
}

It depends on which animations you want to compose. I would expect some combinations to already work using this.