Add class after didRender()

1

I’m trying to animate a component into view by setting an ‘isActive’ property to true in the didRender() method, and watching for isActive in the component’s classNameBindings, then adding a class which, combined with a css transition, should move the component into the viewport.

The problem is that the class seems to have been added precisely at-the-time the component was rendered, so the transition doesn’t occur (the component is rendered already at its final location). Is there a better way to achieve what I want than sticking it in a setTimeout?

2

I got what I wanted using Ember.run.next() (although I’m still interested to hear if this would be the preferred way):

didRender() {
  this._super(...arguments);

  Ember.run.next(() => {
    this.set('isActive', true);
  });
}
3 
Ember.run.scheduleOnce('afterRender', this, function() {
  this.set('isActive', true);
});

This schedules it after the render queue, which should give you the hook you need.

1 Like
4

Thanks, @jasonmit – that’s still adding the class too early, though (so the element just appears, rather than being animated in). Ember.run.next() appears to be doing the trick for now.