Ember.js routing, outlets and animation

Question

It seems like if you want to animate a transition between states using the new Ember.js router and outlets, you're out of luck, since the previous content of an outlet will be destroyed before you have a chance to animate it. In cases where you can completely animate one view out before transitioning to the new state, there's no problem. It's only the case where both old and new views need to be visible that's problematic.

It looks like some of the functionality needed to animate both the previous outlet content and the new was added in this commit, but I'm not sure I understand how to use it.

There's also been some discussion about using extra transitional routes/states to explicitly model the "in-between" states that animations can represent (here and here), but I'm not sure if it's currently possible to match this approach up with outletted controllers and views.

This is similar to How *not* to destroy View when exiting a route in Ember.js, but I'm not sure overriding the outlet helper is a good solution.

Any ideas?

Coomb

Related Ember.js Router: How to animate state transitions – Siddons

Answer 1

You should check this out: https://github.com/billysbilling/ember-animated-outlet.

Then you can do this in your Handlebars templates:

{{animatedOutlet name="main"}}

And transition from within a route like this:

App.ApplicationRoute = Ember.Route.extend({
    showInvoice: function(invoice) {
        this.transitionToAnimated('invoices.show', {main: 'slideLeft'}, invoice);
    }
});

Thomsen

Based on emberjs.com/blog/2013/08/31/ember-1-0-released.html, I feel comfortable saying this is now the correct answer; ember-animated-outlet "will make its way into a future version of Ember". – Coomb

Answer 2

I am currently overriding didInsertElement and willDestroyElement in some of my view classes to support animations. didInsertElement immediately hides the element and then animates it into view. willDestroyElement clones the element and animates it out of view.

didInsertElement: function ()
{
    this.$().slideUp(0);
    this.$().slideDown(250, "easeInOutQuad");
},

willDestroyElement: function ()
{
    var clone = this.$().clone();
    this.$().replaceWith(clone);
    clone.slideUp(250, "easeInOutQuad");
}

Personally, I don't want to start wrapping my outlets in superfluous ContainerViews just to support animations.

Arlynearlynne

This is a good answer, but after reading this I'm thinking built-in support for what I'm asking for won't arrive until v1.1. – Coomb

didInsertElement: function(){ this.$('#top_items').fadeOut(0); this.$('#top_items').fadeIn(1500); }, – Noway

In Ember 1.0 this no longer works. The view is destroyed before you can use replaceWith(). Instead prepend to the parent container of the view. this.$().parent().prepend(clone); – Obstreperous

I think you'll find you may want to destroy the element after the animation is complete. – Waddington