Ember.js路由,网点和动画(Ember.js routing, outlets and ani

2019-06-26 15:05发布

这似乎是,如果你想使用的动画新Ember.js路由器和出口国之间的过渡,你的运气了,因为你有机会动画之前的出口以前的内容将被破坏。 在情况下,你可以完全转换到新的状态之前,动画一个观点出来,没有任何问题。 这是只有在新老观点必须是可见这是有问题的情况下。

它看起来像一些动画无论是以前的出口内容和新的加入所需的功能这个承诺 ,但我不知道我知道如何使用它。

目前也一直在有关使用额外的过渡路线/国家明确建模“在两者之间”指出,动画可以代表(一些讨论, 在这里和这里 ),但我不知道这是否是目前可能这种方法与outletted控制器匹配和看法。

这类似于如何*不*要退出在Ember.js路由时破坏景观 ,但我不知道压倒一切的outlet助手是一个很好的解决方案。

有任何想法吗?

Answer 1:

你应该检查了这一点: https://github.com/billysbilling/ember-animated-outlet 。

然后你就可以在你的手把模板做到这一点:

{{animatedOutlet name="main"}}

而从这样的路线中过渡:

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


Answer 2:

我目前正在重写didInsertElementwillDestroyElement在我的一些观点类来支持动画。 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只是为了支持动画。



文章来源: Ember.js routing, outlets and animation