Ember.js Router: How to animate state transitions

Question

Has somebody found a good way to animate state transitions?

The router immediately removes the view from the DOM. The problem with that is that I can't defer that until the end of the animation. Note: I'm using v1.0.0-pre.4.

Answer 1

Billy's Billing just released an Ember module that supports animated transitions.

Answer 2

I'll expand on Lesyk's answer. If you need to apply it to multiple views in a DRY way, you can create a customization class like this:

App.CrossfadeView = {   didInsertElement: function(){     //called on creation     this.$().hide().fadeIn(400);   },   willDestroyElement: function(){     //called on destruction     this.$().slideDown(250);   } }; 

And then in your code you apply it on your various view classes. As Ember depends on jQuery you can use pretty much any jQuery animation.

App.IndexView = Ember.View.extend(App.CrossfadeView); App.PostView = Ember.View.extend(App.CrossfadeView);