Skip to content

Instantly share code, notes, and snippets.

@brian-mann
Created October 24, 2012 16:28
Show Gist options
  • Star 26 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save brian-mann/3947145 to your computer and use it in GitHub Desktop.
Save brian-mann/3947145 to your computer and use it in GitHub Desktop.
Allows jQuery animation transitions between marionette regions
var FadeTransitionRegion = Backbone.Marionette.Region.extend({
show: function(view){
this.ensureEl();
view.render();
this.close(function() {
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 that = this;
view.fadeOut(function(){
if (view.close) { view.close(); }
that.trigger("view:closed", view);
if (cb){ cb.call(that); }
});
},
open: function(view, callback){
var that = this;
this.$el.html(view.$el.hide());
view.fadeIn(function(){
callback.call(that);
});
}
});
@giiska
Copy link

giiska commented Apr 4, 2014

How can I close currentView before render new view to region?

@marcin-krysiak
Copy link

I've written the following marionette plugin that adds 4 kind of transitions. There can be easily added more transition types.

https://github.com/marcinkrysiak1979/marionette.showAnimated

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment