Animate

animate.js

// TODO - remove dependencies on jquery, underscore, require, and backbone.

define(function (require) {
  'use strict';
  var _ = require('underscore');
  var Backbone = require('backbone');

  var transitionEnd = [
    'transitionend',
    'webkitTransitionEnd',
    'oTransitionEnd',
    'MSTransitionEnd'
  ].join(' ');

  /*===================
  | Animation Helpers |
  ===================*/
  var executeOrApply = function (functionOrStyles, $el) {
    if ('function' === typeof functionOrStyles) {
      functionOrStyles($el);
    } else {
      $el.css(functionOrStyles);
    }
  };

  return function animateStyleChange($el, startState, endState) {
    var animationEvents = _.extend({}, Backbone.Events);
    if (_.isEqual(startState, endState)) {
      _.defer(function () {
        animationEvents.trigger('end', $el);
      });
      return animationEvents;
    }

    // need to apply start state to ensure a smooth transition
    executeOrApply(startState, $el);
    _.defer(function () {
      //after that's fully rendered, start animating
      $el.addClass('is-animating');
      executeOrApply(endState, $el);
      animationEvents.trigger('start', $el);
      var transitionEndHandler = function () {
        $el.removeClass('is-animating');
        animationEvents.trigger('end', $el);
        _.defer(function () {
          animationEvents.trigger('after', $el);
        });
      };
      $el.one(transitionEnd, transitionEndHandler);
    });

    return animationEvents;
  };
});