Question

我有一个只使用jQuery的简单动画：

jQuery(document).ready(function($) {

  $('.right-block').on('click', 'chevron', function() {
    if ($('.activity').hasClass('extended')) {
      $('.activity').removeClass('extended').addClass('normal');
      $('.extended-block').slideUp();
      $('footer').fadeOut();
    } else {
      $('.activity').addClass('extended').removeClass('normal');
      $('.extended-block').slideDown();
      $('footer').fadeIn();
    }      
  });

});

如果您愿意，可以在行动中看到它：http://cdpn.io/3bfea533af106c9bb601626be55eb3c1

当我尝试在Ember做同样的事情时虽然事情变得有点滑稽。动画开始，它反转，重新开始等等。它经常在经过大量的来回完成之后完成，但状态转换不会被保证，它可能会以你开始时的状态结束。

我的Ember组件如下所示：

App.ActivityWidgetComponent = Ember.Component.extend({

    actions: {
        toggleWidgetState: function() {
            var self = this;
            this.$('.right-block').on('click', 'chevron', function() {
                Ember.run.next(this, function() {
                    if (self.$('.activity').hasClass('extended')) {
                        self.$('.activity').removeClass('extended').addClass('normal');
                        self.$('.extended-block').slideUp();
                        self.$('footer').fadeOut();
                    } else {
                        self.$('.activity').addClass('extended').removeClass('normal');
                        self.$('.extended-block').slideDown();
                        self.$('footer').fadeIn();
                    }      
                }); 
            });
        }
    }

});

我的潜在怀疑是，这与“跑循环”黑暗艺术有关。这就是为什么你通过将jQuery添加到下一个运行循环来看到我试图“棘手”的原因。这种改变似乎确实改善了一点行为，但它绝对没有解决它（我不确定它是否朝着正确的方向迈出了一步）。

任何帮助表示感谢。

Answer 1

你的问题是组件的动作只是添加一个jquery事件监听器，它将执行jquery动画，而不是触发它。您可以使用以下方法替换组件：

App.ActivityWidgetComponent = Ember.Component.extend({

    actions: {
        toggleWidgetState: function() {                                      
            if (this.$('.activity').hasClass('extended')) {
                this.$('.activity').removeClass('extended').addClass('normal');
                this.$('.extended-block').slideUp();
                this.$('footer').fadeOut();
            } else {
                this.$('.activity').addClass('extended').removeClass('normal');
                this.$('.extended-block').slideDown();
                this.$('footer').fadeIn();
            }                                  
        }
    }

});

在您的模板中，使用action视图助手触发此操作：

  ...
  <div {{action "toggleWidgetState"}}  class="right-block">
    <chevron>&nbsp; &nbsp;</chevron>
  </div>
  ...

这是一个有效的http://jsfiddle.net/marciojunior/H9XYd/

的实时示例

jQuery动画中断了

1 个答案: