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

  }

});