Delay transitionTo until an animation completes


How can I have ember wait for this animation to finish before transitioning to a different route?

$('#recipe-detail-container').hide('slide', {direction: 'down'}, 600);


jQuery provides complete callbacks for its animations:


You could do this with a promise. I’m not sure if there is a tutorial that shows how to do this.

This would actually be a really great tutorial, I just don’t have time to write it right now :frowning:

I’ll check with @intuitivepixel to see if he’s able to do it.


I tried using the complete callback and jquery acted like it didn’t know what I was talking about.

I assume it has something to do with the ‘this’ keyword. I’ll try a promise and see if it works that way.


This is a bit more complicated. @intuitivepixel might be able to write an article about this tomorrow.


@JordanRDesigns @tarasm in the meantime you might find this ember add-on useful :


this in the callback refers to something different (the jQuery element I believe). So you need to save the this pointer in the outer scope like so:

var self = this;
$('#recipe-detail').fadeOut(600, function() {


Duh, I will try this but I’m sure it will work. Brain no work today.


Thanks for this, it looks awesome! I’m excited to try it out!


Just in case someone take a look at this. If you use an Arrow functions you don’t have to create the variable self,

 Ember.$('#message').fadeOut(500, () => {
        this.set('message', 'Set message after fade out');


If you’re using this pattern, I would guard against the object being destroyed since it’s not guaranteed that after 500ms that the object is still around.

 Ember.$('#message').fadeOut(500, () => {
  if (!this.get('isDestroyed')) {
    this.set('message', 'Set message after fade out');


Thanks @jasonmit, I didn’t know it could be a problem, I am going to read more about it.