javascript - 在Ember中将类绑定(bind)到DOM设置超时

当类"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/