Search⌘ K
Home
Courses
Introduction to Marionette.js – The Backbone Framework

Adding Animation

Explore how to animate item view removals using Marionette's lifecycle events and jQuery for smooth fading effects. Understand how to remove DOM elements correctly after animation to maintain performance. Discover the use of triggerMethod to handle bubbled events and create responsive UI updates in your Marionette.js applications.

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:

Node.js
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 ...