灰燼動畫視圖更改

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，所以我在路由和控制器之間沒有任何轉換。

這裏是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') 
 
     
 
    });

的VisualizationController設置的方式是，在OptionsView在options每一個變化通過DrawVisualizationView觸發圖表的重繪。

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') 

});