Ember.js路由，插座和动画 [英] Ember.js routing, outlets and animation

问题描述

看起来，如果要使用新的Ember.js路由器和插座来动画化国家之间的转换，那么您没有运气，因为在您有机会动画之前，插座的先前内容将被销毁。如果在转换到新状态之前，您可以将一个视图完全动画化，那么没有问题。只有这样才能看到新的和新的视图都是可见的，这是有问题的。

看起来像一些功能需要动画化以前的插座内容和新的已添加到此提交中，但我不知道我明白如何使用它。

还有一些关于使用额外的过渡路由/状态来明确建模动画可以表示的中间状态的讨论（这里和这里），但我不知道是否可以将这种方法与出口的控制器和视图相匹配。

这类似于如果*不*在Ember.js 中退出路由时销毁View，但我不确定覆盖<$ c






$ b >解决方案

您应该查看： 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）; 
} 
}）; 
  

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.

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.

Any ideas?

解决方案

You should check this out: 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屋！