Jquery анимация прервана

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 хотя все становится немного забавным. Анимация начинается, она меняет направление, перезапускает и т. Д. Она часто заканчивается после многого и задерживается, но переход состояния не гарантируется, он может оказаться в том же состоянии, в котором вы начали.

My Ember Component выглядит так: :

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/