ember.js - 在 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);
    }

  }

});