Backbone Marionette View Transition

AnimatedRegion.js

var AnimatedRegion = Backbone.Marionette.Region.extend({
    show: function(view) {
        this.ensureEl();
        view.render();

        this.close();

        if (this.currentView && this.currentView !== view) {
            return;
        }

        this.currentView = view;

        this.open(view, function() {
            if (view.onShow) {
                view.onShow();
            }

            view.trigger('show');

            if (this.onShow) {
                this.onShow(view);
            }

            this.trigger('view:show', view);
        });


    },

    close: function(cb) {
        var view = this.currentView;
        delete this.currentView;

        if (!view) {
            if (cb) {
                cb.call(this);
            }

            return;
        }

        var self = this;

        function done() {
            if (view.close) {
                view.close();
            }

            self.trigger('view:closed', view);

            if (cb) {
                cb.call(self);
            }
        }

        if (view.hide) {
            view.hide(done);
        } else {
            done();
        }

    },

    open: function(view, cb){
        this.$el.append(view.$el);

        if (view.show) {
            // TODO: this should be set by the view
            view.$el.hide();
            view.show($.proxy(cb, this));
        } else if (cb) {
            cb.call(this);
        }
    }
});

FadeView.js

var FadeView = Backbone.Marionette.ItemView.extend({
    show: function (done) {
        this.$el.fadeIn('slow', done);
    },

    hide: function (done) {
        this.$el.fadeOut('slow', done);
    }
});