为什么 Ember.run afterRender 不适用于 CSS 过渡？答案

【问题标题】：Why is Ember.run afterRender not working for CSS transitions?为什么 Ember.run afterRender 不适用于 CSS 过渡？
【发布时间】：2013-09-16 22:32:07
【问题描述】：

据我了解，使用 CSS 过渡的一种方法是使用 Ember.run.scheduleOnce('afterRender')

但是，对我来说，如果不添加超时，它就无法工作。这是在 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);
    }
  },
});

这是以前有效但现在不再有效的东西，还是我错过了什么？

【问题讨论】：

标签： ember.js css-transitions

【解决方案1】：

Ember.run.next 在这类事情上对我来说效果很好。

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

【讨论】：

谢谢。仔细阅读文档后，很明显 afterRender 是在渲染 DOM 元素之后但在最终插入之前，因此可以用于维度计算等，但对于 css 转换来说太早了。
很高兴知道。感谢您发布后续信息。
我通过 Ember.run.schedule 将 CSS 类添加到 DOM 元素。当我单步执行代码时它起作用了，但是，在一个步骤中，必须重新渲染元素并且我添加的类消失了。将 Ember.run.schedule 更改为 Ember.run.next 为我解决了这个问题。