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 u

Answer 1

Ran into this same requirement on my app. Tried Ember Animated Outlet, but didn't give the granularity I needed (element specific animations).

The solution that worked for me was as follows --

Change linkTo to be an action

{{#linkTo "todos"}}Todos{{/linkTo}}

Becomes...

Todos

Create Method for goToTodos in current controller

App.IndexController = Ember.Controller.extend({
    goToTodos: function(){

        // Get Current 'this' (for lack of a better solution, as it's late)
            var holdThis = this;

        // Do Element Specific Animation Here
            $('#something').hide(500, function(){

                // Transition to New Template
                    holdThis.transitionToRoute('todos');

            });

    }
});

Finally -- To animate in elements on the Todos Template, use didInsertElement on the view

App.TodosView = Ember.View.extend({
    didInsertElement: function(){

        // Hide Everything
            this.$().hide();

        // Do Element Specific Animations Here
            $('#something_else').fadeIn(500);

    }
});

So far, this is the most elegant solution I've found for element specific animations on transition. If there is anything better, would love to hear!