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

Question

当类 "fa-counter" 添加到 DOM 时，我有一个动画正在工作。

我希望动画在我登陆页面 3 秒后开始工作。我如何在 ember 中控制它？

我发现 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 就会启动动画

在我的 Controller 中，默认情况下 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>

Controller

var MenuController = Ember.ObjectController.extend({
    isAnimate: false,
    startWatchingAnimation: function(controller){
        Ember.run.later(this, function(){
            this.$('.fa').addClass('.fa-counter');
        }, 500);
    },
});

这两种方法都没有真正起作用，我该如何实现？

Answer 1

恕我直言，这是 View [组件]的工作，因为 View [组件]与 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秒后它就会变得可见。