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

Question

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

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

Answer 1

Billy's Billing刚刚发布了支持动画过渡的Ember module。

Answer 2

我将扩展Lesyk的答案。如果需要以干燥方式将其应用于多个视图，可以创建如下的自定义类：

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，但没有给出我需要的粒度（元素特定的动画）。

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

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

            });

    }
});

最后 - 要在Todos模板上的元素中设置动画，请在视图上使用didInsertElement

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

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

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

    }
});

到目前为止，这是我在过渡时为元素特定动画找到的最优雅的解决方案。如果还有更好的事情，我很乐意听到！

Answer 4

我知道这已经很老了，但今天这个特定于上下文的动画的最佳解决方案可能是ember liquid fire。

它允许您在转换文件中执行以下操作：

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

Answer 5

我找到了另一个在视图中实现动画的插件解决方案：ember-animate

示例：

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);
    }
}

演示：author's personal website

Answer 6

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