Ember.js路由器:如何为状​​态转换设置动画

Question

有人找到了一种动态状态转换的好方法吗？

路由器立即从DOM中删除视图.问题是我不能推迟到动画结束.注意:我使用的是v1.0.0-pre.4.

Answer 1

比利的Billing刚刚发布了一个支持动画过渡的Ember模块.

Answer 2

我将扩展Lesyk的答案.如果需要以DRY方式将其应用于多个视图,可以创建如下的自定义类:

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

然后在您的代码中将其应用于各种视图类.由于Ember依赖于jQuery,你几乎可以使用任何jQuery动画.

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

Answer 3

在我的应用程序上遇到同样的要求.尝试过Ember Animated Outlet,但没有给出我需要的粒度(元素特定的动画).

对我有用的解决方案如下 -

将link更改为动作

{{#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');

            });

    }
});

最后 - 要在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')
  );
};