Introduction to Marionette.js – The Backbone Framework/

...

/

Adding Animation

Adding Animation

Learn how to animate an event in Marionette and add a fading effect.

We'll cover the following...

Animating the removed ItemView

When a model is removed from the collection, its child view is automatically closed and removed from the DOM for us. Instead of having it disappear suddenly, let’s have it gently fade out by animating it with jQuery. To achieve this, we simply need to leverage Marionette’s lifecycle events. Here’s how we do it:

Press + to interact
List.Contact = Marionette.ItemView.extend({
    // same code as before
    remove: function(){
        this.$el.fadeOut();
    }
});

As we can tell, this is pretty easy. Marionette calls a child view’s remove method if it’s defined when the corresponding model is removed from the collection referenced by the collection/composite view. If we run the page and delete a contact, we’ll see it fade out of view. However, when we inspect the HTML source, we can see the DOM element is still there, only hidden. To fix this, we need to remove the ...