Question

我遇到了动画更改特定视图的问题。我有两个视图，在其他属性中使用相同的'options'参数。 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的设置方式是，options中OptionsView的每次更改都会触发通过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')

});

Ember动画视图更改

1 个答案: