Simple Ember Animation View Mixin

animate-outlet.js

import Ember from 'ember';

/**
 * Mixin support for animating transitions/outlets.
 */
var AnimateOutletMixin = Ember.Mixin.create(Ember.Evented, {
  /**
   * @private
   * @property {jQuery} _$clone - temporary store of the cloned view for shared access
   */
  _$clone: null,

  /**
   * Event hook for initial animation logic. Passes a callback to trigger the next event.
   * @param {Function} done - callback to trigger didAnimateIn()
   *
   * Usage:
   * ```javascript
   * import Ember from 'ember';
   * import AnimateOutletMixin from 'cn/core/mixins/animate-outlet';
   *
   * var MenuView = Ember.View.extend(AnimateOutletMixin, {
   *   animateIn: function(done) {
   *     this.$().velocity({
   *       left: ['0%', '-100%']
   *     }, {
   *       complete: done
   *     });
   *   },
   *
   *   didAnimateIn: function() {
   *     // post animation logic
   *   }
   * });
   *
   * export default MenuView;
   * ```
   */
  animateIn: function(done) {
    done();
  },

  /**
   * Event hook for post animation. Is triggered when done callback is called from animateIn.
   */
  didAnimateIn: function() {},

  /**
   * Event hook for animating out. animateOut passes a clone of the view before the object is
   * destroyed. You must call done to properly trigger the teardown of the view/clone.
   *
   * Note: There is no need to append the clone to the DOM. The clone is automatically appended
   * to the view's parent.
   * @param {jQuery Array} $clone - A clone of the view to use before the view is destroyed.
   * @param {Function} done - callback to trigger didAnimateOut() and execute teardown
   *
   * Usage:
   * ```javascript
   * import Ember from 'ember';
   * import AnimateOutletMixin from 'cn/core/mixins/animate-outlet';
   *
   * var MenuView = Ember.View.extend({
   *   animateOut: function($clone, done) {
   *     $clone.velocity({
   *       left: ['-100%', '0%']
   *     }, {
   *       complete: done
   *     });
   *   }
   * });
   * ```
   */
  animateOut: function($clone, done) {
    done();
  },

  /**
   * Triggers the animateIn event and passes the didAnimateIn callback.
   * @private
   */
  _animateIn: function() {
    this.trigger('animateIn', this._didAnimateIn.bind(this));
  }.on('didInsertElement'),

  /**
   * Clones the view before the view is destroyed, appends it, and passes it to the animateOut event.
   * Also passes didAnimateOut function as a callback.
   * @private
   */
  _animateOut: function() {
    var $this = this.$();
    var $clone = $this.clone();

    $this.parent().append($clone);
    this.set('_$clone', $clone);
    this.trigger('animateOut', $clone, this._didAnimateOut.bind(this));
  }.on('willDestroyElement'),

  /**
   * Triggers the didAnimateIn event hook.
   * @private
   */
  _didAnimateIn: function() {
    this.trigger('didAnimateIn');
  },

  /**
   * Triggers didAnimateOut event hook and removes the clone from the DOM.
   * @private
   */
  _didAnimateOut: function() {
    this.get('_$clone').remove();
    this.trigger('didAnimateOut');
  }
});

export default AnimateOutletMixin;