有人找到了一种动画状态转换的好方法吗？
路由器立即从 DOM 中删除视图。问题是我不能推迟到动画结束。注意：我使用的是 v1.0.0-pre.4。
【问题讨论】：
Ember.View#willDestroyElement将过渡类添加到您的视图中？
标签： css animation ember.js router
App.SomeView = Ember.View.extend({
didInsertElement: function(){
//called on creation
this.$().hide().fadeIn(400);
},
willDestroyElement: function(){
//called on destruction
this.$().slideDown(250)
}
});
【讨论】：
Billy's Billing 刚刚发布了一个支持动画过渡的 Ember module。
【讨论】：
我将扩展 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);
【讨论】：
fadeIn 确实有效，但 willDestroyElement 中的 slideDown 不可见，至少对我来说是这样。
在我的应用程序中遇到了同样的要求。试过Ember Animated Outlet，但没有给出我需要的粒度（特定于元素的动画）。
对我有用的解决方案如下--
将 linkTo 更改为 action
{{#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);
}
});
到目前为止，这是我为元素特定的过渡动画找到的最优雅的解决方案。如果有更好的，很想听听！
【讨论】：
我发现了另一个在视图中实现动画的插入式解决方案：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);
}
}
【讨论】：
我知道这已经很老了，但今天这个特定于上下文的动画的最佳解决方案可能是ember liquid fire。
它允许你在转换文件中做这样的事情：
export default function(){
this.transition(
this.fromRoute('people.index'),
this.toRoute('people.detail'),
this.use('toLeft'),
this.reverse('toRight')
);
};
【讨论】：