Ember.js路由、出口和动画

Question

Ember.js路由、出口和动画

20

似乎如果你想要使用新的Ember.js路由和outlets来动画化状态之间的过渡，那么你就没那么幸运了，因为outlet的先前内容将在你有机会对其进行动画处理之前被销毁。在可以完全动画化一个视图并转换到新状态的情况下，没有问题。只有旧视图和新视图都需要可见的情况才有问题。

看起来一些需要同时动画化先前outlet内容和新内容的功能是在这个提交中添加的，但我不确定如何使用它。

也有一些讨论关于使用额外的过渡路线/状态来明确地建模动画可以表示的“中间”状态(这里和这里)，但我不确定目前是否可能将此方法与输出控制器和视图匹配起来。

这类似于如何在离开Ember.js路由时不销毁View, 但我不确定覆盖outlet助手是否是一个好的解决方案。

有什么想法吗？

- adamesque

相关 Ember.js Router: 如何动画化状态转换 - Dmitry Pashkevich

2个回答

7

你应该查看这个：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);
    }
});

- Sebastian Seilund

1

根据http://emberjs.com/blog/2013/08/31/ember-1-0-released.html，我可以自信地说这是正确的答案；“ember-animated-outlet”将会在未来的Ember版本中加入。 - adamesque

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason P · Accepted Answer

目前我正在重写一些视图类的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");
}

就我个人而言，我不想为了支持动画效果而在我的outlets周围添加无用的ContainerViews。