보기 변경 애니메이션 표시

Question

특정보기의 변경 사항에 애니메이션을 적용하는 데 문제가 있습니다. 다른 속성들 중에서 동일한 '옵션'매개 변수를 사용하는 두 가지보기가 있습니다. DrawVisualizationView는 실제로 OptionsView의 입력에서 얻은 옵션으로 차트를 그립니다.

.hbs 파일 :

<!-- Options Part --!> 
<div> 
    {{view App.OptionsView options=controller.options}} 
</div> 
<!-- Visualization Part --!> 
<div id="visualization"> 
    {{view App.DrawVisualizationView options=controller.options}} 
</div> 

나는 경로 사이에 애니메이션을 생산하는 ember-animate를 사용하고 난이 옵션을 변경할 때 나는 애니메이션을 제작해서와 차트가 다시 그려집니다. 예를 들어, 이전 버전은 사라질 것이고 새로운 버전은 사라질 것입니다. 두보기 모두 VisualizationController과 VisualizationRoute을 사용하므로 경로와 컨트롤러 사이에 전환이 없습니다. 여기

는 OptionsView options에서의 모든 변경이 DrawVisualizationView 통해 차트의 재기록을 트리거하는 것을

방식으로 설정된다 VisualizationController DrawVisualizationView

App.DrawVisualizationView = Ember.View.extend({ 
 
     willAnimateIn: function() { //ember-animate method 
 
      //preparation 
 
     }, 
 
     
 
     animateIn: function(done) { 
 
      //some animation 
 
     }, 
 
    
 
     animateOut: function(done) { 
 
      //some animation 
 
     }, 
 
    
 
     drawVisualization: function(){ 
 
      //draw a chart 
 
     }.observes('options.@each').on('didInsertElement') 
 
     
 
    });

이다.

willAnimateIn, animateIn 및 animateOut은 페이지를로드하는 동안 한 번만 작동합니다.

나는 didInsertElement 및 추가 eventManager 같은 이벤트를 시도하지만 DrawVisualizationView이 옵션을 변경 한 후 호출 될 때 그들 중 누구도이 트리거되지 않습니다.

특정 옵션이 변경된 경우 DrawVisualizationView의 애니메이션 동작을 트리거하는 방법이 있습니까?

Answer 1

저자 ember-animate. options이 변경되면보기의 애니메이션을 다시 설정하려면 다음을 수행하십시오.

App.DrawVisualizationView = Ember.View.extend({ 

    willAnimateIn: function() { //ember-animate method 
     //preparation 
    }, 

    animateIn: function(done) { 
     //some animation 
    }, 

    animateOut: function(done) { 
     //some animation 
    }, 

    drawVisualization: function() { 

     this.animateOut(function() { 
      this.willAnimateIn(); 
      this.animateIn(); 
     }.bind(this)); 

    }.observes('options.@each') 

});