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.
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();
}
}
}
Implementing a hide animation for
this.view
and removing it after the animation is finished is easily done by adding ananimateRemove
method tothis.view
, e.g.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
inrender
, e.g.I don't like that approach though. I'd rather be able to define an
animateShow
oranimateAdd
method, such aswhich i would invoke at the end of the
_insertViewAtIndex
method, directly after the item viewsel
has been added to the DOM - e.g.Any opinions? Should i do a pull request?