2012-07-19 50 views
0

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

我希望收到有关哪些可能是最合适的方式来整合视图级别转换的反馈/意见。

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

    }) 

}); 

任何意见?

+0

你有没有找到解决这个问题呢?我现在正在考虑同样的事情。我认为选项2会更好。我不明白为什么我们想要创建一个自定义事件,当已经有一个事件从浏览器触发。但我对Ember很新,所以我不是100%肯定的...... – gstroup 2012-10-18 16:30:03

+0

@gstroup,低于我的最后一个方法。我希望它能帮助你。 – ppcano 2012-11-07 12:55:59

回答

0

最后,我添加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); 
    } 

    } 

});