在Ember上使用过渡

Question

我一直在使用jquery插件在我的视图上创建转换，并决定在CSS级别使用类名创建它们。

我希望收到关于哪种方式最适合在视图级别集成转换的反馈/意见。

选项1）

App = Em.Application.create({
  customEvents: {
    webkitTransitionEnd: 'transitionEnd'
  }
});
Em.View.extend({
  transitionEnd: function(event) {
    // write you APP logic. TransitionEnd will fire multiple times for each transitioned CSS property
  },
});

选项2）

Em.View.extend({
  transitionEnd: function(event) {
    // write you APP logic. TransitionEnd will fire multiple times for each transitioned CSS property
  },
  didInsertElement: function() {
    this._super();
    self.$().on('webkitTransitionEnd', function(event) {
      self.transitionEnd(event);
    });
  })
});

有什么意见吗？

Answer 1

最后，我添加了由eventDispatcher管理的webkitTransitionEnd事件，并以以下方式使用它：

Yn.Modal = Em.Mixin.create({
  isHidden: true,
  classNameBindings: ['isHidden'],
  classNames: ['modal'],

  transitionEnd: function(event) {
    // transitionEnd fires multiple times
    if ( event.originalEvent.propertyName === '-webkit-transform' ) {
      var eventName = this.get('isHidden') ? 'transitionHide' : 'transitionShow' ;
      this.fire(eventName);
    }
  }
});