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

I know this is pretty old, but the best solution for this context-specific animation today is probably ember liquid fire.

It allows you to do things like this in a transition file:

export default function(){
  this.transition(
    this.fromRoute('people.index'),
    this.toRoute('people.detail'),
    this.use('toLeft'),
    this.reverse('toRight')
  );
};

Answer 2

I've found another drop-in solution that implements animations in Views: ember-animate

Example:

App.ExampleView = Ember.View.extend({

    willAnimateIn : function () {
        this.$().css("opacity", 0);
    },

    animateIn : function (done) {
        this.$().fadeTo(500, 1, done);
    },

    animateOut : function (done) {
        this.$().fadeTo(500, 0, done);
    }
}

Demo: author's personal website

Answer 3

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);

Answer 4

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"}}<button>Todos</button>{{/linkTo}}

Becomes...

<a href="#/todos" {{action "goToTodos"}}><button>Todos</button></a>

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!

Answer 5

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

Answer 6

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