Why is Ember.run afterRender not working for CSS transitions?

Question

From my understanding, one way to work with CSS transitions is to use Ember.run.scheduleOnce('afterRender')

However, for me it is not working without adding a timeout. This is in Ember 1.0.0

View = Em.View.extend({
  didInsertElement: function() {
    Ember.run.scheduleOnce('afterRender', this, 'animateModalOpen');
  },

  animateModalOpen: function() {
    // this does not work - modal gets styles from class "in" with no transition
    $('.modal').addClass('in');

    // this does work, the transition is fired
      setTimeout(function() {
        $('.modal').addClass('in');
      }, 1);
    }
  },
});

Is this something that used to work and just doesn't anymore, or am I missing something?

Answer 1

Ember.run.next has worked very well for me on this type of thing.

didInsertElement: function() {
  Ember.run.next(this, this.animateModalOpen);
}