Ember.js路由器：如何动画状态转换(Ember.js Router: How to anima

已经有人发现动画状态过渡的好办法？

路由器将立即从DOM的观点。 但问题是，我不能推迟直到动画结束。 注：我使用的是V1.0.0，pre.4。

Answer 1:

比利的结算刚刚发布的灰烬模块支持动画过渡。

Answer 2:

我会扩大Lesyk的答案。 如果您需要将其应用到多个视图在干燥的方式，你可以创建一个自定义类是这样的：

App.CrossfadeView = {
  didInsertElement: function(){
    //called on creation
    this.$().hide().fadeIn(400);
  },
  willDestroyElement: function(){
    //called on destruction
    this.$().slideDown(250);
  }
};

然后在你的代码，你把它在你不同的视图类。 由于灰烬取决于jQuery的你可以使用几乎任何jQuery的动画。

App.IndexView = Ember.View.extend(App.CrossfadeView);
App.PostView = Ember.View.extend(App.CrossfadeView);

Answer 3:

跑进我的应用程序这个同样的要求。 试图灰烬动画出口 ，但并没有给我所需要的粒度（元特定动画）。

为我工作的解决办法是如下 -

更改linkTo是一个行动

{{#linkTo "todos"}}<button>Todos</button>{{/linkTo}}

成为...

<a href="#/todos" {{action "goToTodos"}}><button>Todos</button></a>

在电流控制器goToTodos创建方法

App.IndexController = Ember.Controller.extend({
    goToTodos: function(){

        // Get Current 'this' (for lack of a better solution, as it's late)
            var holdThis = this;

        // Do Element Specific Animation Here
            $('#something').hide(500, function(){

                // Transition to New Template
                    holdThis.transitionToRoute('todos');

            });

    }
});

最后-要在动画上托多斯模板元素，在视图中使用didInsertElement

App.TodosView = Ember.View.extend({
    didInsertElement: function(){

        // Hide Everything
            this.$().hide();

        // Do Element Specific Animations Here
            $('#something_else').fadeIn(500);

    }
});

到目前为止，这是最完美的解决方案，我发现对过渡元素特定的动画。 如果还有什么更好的，很想听听！

Answer 4:

我知道这是很老了，但是今天这个特定背景下的动画最好的解决方案可能是烬液体火灾 。

它允许你做这样的事情在一个过渡的文件：

export default function(){
  this.transition(
    this.fromRoute('people.index'),
    this.toRoute('people.detail'),
    this.use('toLeft'),
    this.reverse('toRight')
  );
};

Answer 5:

我发现，实现了浏览动画另一插入式解决方案： 烬，动画

例：

App.ExampleView = Ember.View.extend({

    willAnimateIn : function () {
        this.$().css("opacity", 0);
    },

    animateIn : function (done) {
        this.$().fadeTo(500, 1, done);
    },

    animateOut : function (done) {
        this.$().fadeTo(500, 0, done);
    }
}

演示： 作者的个人网站

Answer 6:

App.SomeView = Ember.View.extend({
  didInsertElement: function(){
   //called on creation
   this.$().hide().fadeIn(400);
  },
  willDestroyElement: function(){
   //called on destruction
   this.$().slideDown(250)
  }
});

文章来源: Ember.js Router: How to animate state transitions