Backbone Marionette animate a CollectionView

Question

If I have a CollectionView that is rendered and I reset the Collection with new data, how could I fade out the current collection view and then fade it back in with the new collection data?

Answer 1

The most straightforward way to do this, in my onion, is to call the collection.reset function ont he complete of an jQuery.animation. Say your collection lives in an element with class collection, then I would do this,

var that = this;
$('.collection').animate({ opacity: 0 }, { complete: function() {
    that.collection.reset(newModels);
    // Now to fade it back in
    $(this).animate({ opacity: 0 });
  }
});

You can run those lines from inside your view when you're ready to reset the collection. If you have a lot rendering that has to happen then you're might want to shoot off a pre-loader (a spinner, for example) inside the complete function right before the collection.reset (i.e., as soon as the images are hidden)