20

似乎如果您想使用新的 Ember.js 路由器和插座为状态之间的转换设置动画，那么您就不走运了，因为插座的先前内容将在您有机会对其进行动画处理之前被破坏。如果您可以在转换到新状态之前完全动画化一个视图，则没有问题。只有在新旧视图都需要可见的情况下才有问题。

看起来在此提交中添加了一些动画所需的功能，以便为以前的出口内容和新内容添加动画，但我不确定我是否了解如何使用它。

还有一些关于使用额外的过渡路线/状态来显式建模动画可以表示的“中间”状态的讨论（这里和这里），但我不确定目前是否可以将这种方法与出口控制器相匹配和意见。

这类似于How *not* to destroy View when exiting a route in Ember.js，但我不确定覆盖outlet助手是一个好的解决方案。

有任何想法吗？

4

2 回答 2

25

我目前正在覆盖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 中。

于 2012-07-31T20:33:07.823 回答
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);
    }
});
于 2013-04-08T18:48:33.343 回答