Ember.js路由,出口和动画

Question

看起来如果你想使用新的Ember.js路由器和插座来动画状态之间的转换,你就不走运了,因为在你有机会为它设置动画之前,插座的先前内容将被销毁.如果您可以在转换到新状态之前完全为一个视图设置动画,则没有问题.只有在需要显示旧视图和新视图时才会出现问题.

看起来在此提交中添加了以前插件内容和新内容动画所需的一些功能,但我不确定我是否理解如何使用它.

还有一些讨论使用额外的过渡路线/状态来明确地模拟动画可以表示的"中间"状态(此处和此处),但我不确定目前是否可以将此方法与出口控制器相匹配和意见.

这类似于在Ember.js中退出路径时如何*不*销毁View,但我不确定覆盖outlet帮助器是一个很好的解决方案.

有任何想法吗？

Answer 1

我目前正在覆盖didInsertElement并willDestroyElement在我的一些视图类中支持动画.didInsertElement立即隐藏元素,然后将其动画到视图中.willDestroyElement克隆元素并将其设置为视图之外的动画.

didInsertElement: function ()
{
    this.$().slideUp(0);
    this.$().slideDown(250, "easeInOutQuad");
},

willDestroyElement: function ()
{
    var clone = this.$().clone();
    this.$().replaceWith(clone);
    clone.slideUp(250, "easeInOutQuad");
}

就个人而言,我不想开始在多余的ContainerViews中包装我的插座,只是为了支持动画.

Answer 2

你应该看看这个:https://github.com/billysbilling/ember-animated-outlet.

然后,您可以在Handlebars模板中执行此操作:

{{animatedOutlet name="main"}}

并从这样的路线转换:

App.ApplicationRoute = Ember.Route.extend({
    showInvoice: function(invoice) {
        this.transitionToAnimated('invoices.show', {main: 'slideLeft'}, invoice);
    }
});