Ember.Js Router: How to Animate State Transitions

Ember.js Router: How to animate state transitions

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

Ember.js routing, outlets and animation

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

Animate view states in State Manager

You don't ever call the hide function, so it's not going to get executed.

You can use the async transition feature of the state manager to achieve what you're trying to do. Here's a jsFiddle: http://jsfiddle.net/Xkg6X/1/

How to run an action on every route transition in ember?

You can try to define didTransition action on application route. If child route does not define handler for event, it should bubble up to parent route and application is a most top route.

Alternatively, you can create a mixin with didTransition action, and add that mixin to certain routes.

Also, looking at your code I think you might be interested in using liquid-fire addon (if your goal is animated transitions)

Animated view transitions. How to defer removing or inserting element?

Also these might help a lot:

http://discuss.emberjs.com/t/animation-support-in-ember-1-1/1977

https://github.com/billysbilling/ember-animated-outlet

If you could select an answer that'd be really helpful to reducing the number of unanswered Stack Overflow questions on Ember.

Ember.js routing - conditionally prevent route/state change

Ember's router now has a native mechanism to do this very easily. See docs: http://emberjs.com/guides/routing/preventing-and-retrying-transitions/

ember.js: how to abort transitions if target matches current path

The params attribute of the transition will reference the current route's params, not the target. What you need is to look at the models provided to the transition via its providedModels attribute. Your code should look like this:

willTransition: function(transition) {
  if ((this.get('routeName') === transition.targetName) &&
      (this.get('currentModel') === transition.providedModels[transition.targetName])) {
    transition.abort();
    return;
  }

  // ... other code here ...
}

CSS transitions through Ember.js Views: The Ember way to do it?

You have to use Ember.run.scheduleOnce('afterRender'). But you can do it more elegantly by doing the following. Now all of your Views have the hook afterRenderEvent. This should suffice from a clarity standpoint, right?

Ember.View.reopen({
  didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  },
  afterRenderEvent : function(){
    // implement this hook in your own subclasses and run your jQuery logic there
  }
});

PS: This snippet is taken from a post on my blog, where i explain the approach more in detail.

---

Related Topics