# Add class after didRender()

**URL:** <https://discuss.emberjs.com/t/add-class-after-didrender/9544>\
**Category:** Uncategorized\
**Created:** [January 26, 2016, 1:40pm UTC](https://discuss.emberjs.com/t/add-class-after-didrender/9544 "2016-01-26T13:40:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidpmccormick](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/davidpmccormick/32/11790_2.png) [@davidpmccormick](https://discuss.emberjs.com/u/davidpmccormick)\
**Post date:** [January 26, 2016, 1:40pm UTC](https://discuss.emberjs.com/t/add-class-after-didrender/9544/1 "2016-01-26T13:40:22Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![davidpmccormick](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/davidpmccormick/32/11790_2.png) [@davidpmccormick](https://discuss.emberjs.com/u/davidpmccormick)\
**Post date:** [January 29, 2016, 6:22pm UTC](https://discuss.emberjs.com/t/add-class-after-didrender/9544/2 "2016-01-29T18:22:23Z")

</div>

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

```

---

<div class="post-metadata">

**Author:** ![jasonmit](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/jasonmit/32/182_2.png) [@jasonmit](https://discuss.emberjs.com/u/jasonmit)\
**Post date:** [January 30, 2016, 7:45am UTC](https://discuss.emberjs.com/t/add-class-after-didrender/9544/3 "2016-01-30T07:45:56Z")

</div>

```auto
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.

---

<div class="post-metadata">

**Author:** ![davidpmccormick](https://sea1.discourse-cdn.com/flex019/user_avatar/discuss.emberjs.com/davidpmccormick/32/11790_2.png) [@davidpmccormick](https://discuss.emberjs.com/u/davidpmccormick)\
**Post date:** [February 2, 2016, 9:07am UTC](https://discuss.emberjs.com/t/add-class-after-didrender/9544/4 "2016-02-02T09:07:01Z")

</div>

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.