当类"fa-counter"
添加到DOM时,我有一个动画工作。
我希望动画在我进入页面3秒后开始工作。我该如何控制余烬?
我发现Ember.run.later是可以使用的选项,但是我在如何实现它上感到挣扎。
编码
HTML
{{#if isAnimate}}
<i class="fa fa-cog fa-fw big fa-counter"></i>
{{else}}
<i class="fa fa-cog fa-fw big"></i>
{{/if}}
因此,如果
isAnimate
类fa-counter
使动画开始在我的控制器中,默认
isAnimate
为false
var MenuController = Ember.ObjectController.extend({
isAnimate: false,
startWatchingAnimation: function(controller){
var self = this;
Ember.run.later(function(){
self.set('isAnimate', true);
}, 1000);
},
});
我还考虑过使用this。$()方法来访问范围限定的JQuery对象。
HTML
<i class="fa fa-cog fa-fw big"></i>
控制者
var MenuController = Ember.ObjectController.extend({
isAnimate: false,
startWatchingAnimation: function(controller){
Ember.run.later(this, function(){
this.$('.fa').addClass('.fa-counter');
}, 500);
},
});
这两种方法中的任何一种都不起作用,我该如何实现呢?
最佳答案
恕我直言,这是您的视图[组件]的工作,因为视图[组件]与DOM的状态紧密相关。如果从DOM中删除了该元素,则您的动画将不再有效。您的Ember.run.later
本能与我会做的一样,但是还有更多。这是我的示例:
// app/components/my-component.js
export default Ember.Component.extend({
isVisible: false,
_startTimer: Ember.on('didInsertElement', function() {
this._visibleTimer = Ember.run.later(this, () => {
this._visibleTimer = null;
this.set('isVisible', true);
}, 3000);
}),
_endTimer: Ember.on('willDestroyElement', function() {
if(this._visibleTimer) {
Ember.run.cancel(this, this._visibleTimer);
}
})
});
// app/templates/components/my-component.js
<i class="fa fa-cog fa-fw big {{if isVisible 'fa-counter'}}"></i>
在这种情况下,您确实会稍有不同。与其将其视为“我要制作动画”,不如将其视为“我想要处于一种状态”……而这些状态之间的过渡是动画。因此,默认情况下它是不可见的,然后在3秒钟后它变为可见。
关于javascript - 在Ember中将类绑定(bind)到DOM设置超时,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/33430006/