Question

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

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

还有一些关于使用额外过渡路线/状态来明确建模动画可以表示的“中间”状态（here和here）的讨论，但我不确定是否目前可以将此方法与插座控制器和视图相匹配。

这类似于How *not* to destroy View when exiting a route in Ember.js，但我不确定覆盖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);
    }
});

Ember.js路由，出口和动画

2 个答案: