Delay transitionTo until an animation completes

Design
1

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);
$('#recipe-detail').fadeOut(600);
this.transitionTo('recipes');
2

jQuery provides complete callbacks for its animations: .fadeOut() | jQuery API Documentation

3

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.

4

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.

5

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

6

@JordanRDesigns @tarasm in the meantime you might find this ember add-on useful : https://github.com/billysbilling/ember-animated-outlet

1 Like
7

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() {
  self.transitionTo('recipes');
});
1 Like
8

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

9

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

10

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');
      }).fadeIn(500);
11

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');
  }
}).fadeIn(500);
1 Like
12

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