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启动动画

默认情况下，我的控制器isAnimate为false

var MenuController = Ember.ObjectController.extend({
    isAnimate: false,
    startWatchingAnimation: function(controller){
        var self = this;
        Ember.run.later(function(){
          self.set('isAnimate', true);
        }, 1000);
    },
});

我还想过使用这个。$（）方法访问作用域的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);
    },
});

这两种方法中没有一种能够真正起作用，我怎样才能实现呢？

Answer 1

恕我直言，这是您的视图[组件]的工作，因为视图[组件]与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>

在这种情况下，您确实对它的看法略有不同。而不是把它想象成＆＃34;我想要动画一些东西＆＃34;，你必须把它想象成＆＃34;我想要处于一个状态＆＃34; ......这些状态之间的过渡是动画。因此，默认情况下它是不可见的，然后在3秒后它变得可见。

在Ember中将类绑定到DOM设置Timeout

1 个答案: