animateShow companion piece to animateRemove

[codepunkt]

Implementing a hide animation for this.view and removing it after the animation is finished is easily done by adding an animateRemove method to this.view, e.g.

var dom = require('ampersand-dom');
var View = require('ampersand-view');

module.exports = View.extend({
  template: '<li>item</li>',

  initialize: function () {
    this.onHidden = this.onHidden.bind(this);
  },

  animateRemove: function () {
    this.el.addEventListener('transitionend', this.onHidden);
    dom.removeClass(this.el, 'visible');
  },

  onHidden: function() {
    this.el.removeEventListener('transitionend', this.onHidden);
    this.remove();
  }
});

Adding a show animation that should execute whenever an item view is added to the collection view is not as easily done. One possible way would be a setTimeout in render, e.g.

  render: function () {
    View.prototype.render.apply(this, arguments);
    window.setTimeout(function () {
      dom.addClass(this.el, 'visible');
    }.bind(this), 0);
  }

I don't like that approach though. I'd rather be able to define an animateShow or animateAdd method, such as

  animateShow: function() {
    dom.addClass(this.el, 'visible');
  }

which i would invoke at the end of the _insertViewAtIndex method, directly after the item views el has been added to the DOM - e.g.

  _insertViewAtIndex: function (view) {
    if (!view.insertSelf) {
      // [...]

      // animate the view in if it has an `animateShow` method.
      if (view.animateShow) {
        view.el.clientWidth, view.animateShow();
      }
    }
  }

Any opinions? Should i do a pull request?

[kamilogorek]

Quite similar issue regarding DOM insertion here – AmpersandJS/ampersand-view#124

[codepunkt]

Not sure if those are necessarily the same thing ;)

[kamilogorek]

Not the same but similar :)