Ember.js 路由、出口和动画 [英] Ember.js routing, outlets and animation

问题描述

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

It seems like if you want to animate a transition between states using the new Ember.js router and outlets, you're out of luck, since the previous content of an outlet will be destroyed before you have a chance to animate it. In cases where you can completely animate one view out before transitioning to the new state, there's no problem. It's only the case where both old and new views need to be visible that's problematic.

看起来在 此提交，但我不确定我是否了解如何使用它.

It looks like some of the functionality needed to animate both the previous outlet content and the new was added in this commit, but I'm not sure I understand how to use it.

还有一些关于使用额外的过渡路由/状态来显式建模动画可以表示的中间"状态的讨论(这里 和这里>)，但我不确定目前是否可以将这种方法与出口控制器和视图相匹配.

There's also been some discussion about using extra transitional routes/states to explicitly model the "in-between" states that animations can represent (here and here), but I'm not sure if it's currently possible to match this approach up with outletted controllers and views.

这类似于 在 Ember.js 中退出路由时如何*不*销毁视图，但我不确定覆盖 outlet 助手是一个很好的解决方案.

This is similar to How *not* to destroy View when exiting a route in Ember.js, but I'm not sure overriding the outlet helper is a good solution.

有什么想法吗?

推荐答案

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

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

Then you can do this in your Handlebars templates:

{{animatedOutlet name="main"}}

然后从这样的路线内过渡:

And transition from within a route like this:

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

这篇关于Ember.js 路由、出口和动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！