Rutas, salidas y animaciones de Ember.js

Question

Parece que si desea animar una transición entre estados que utilizan el nuevo enrutador y enrutadores Ember.js, no tiene suerte, ya que se destruirá el contenido anterior de una toma de corriente. antes de que tengas la oportunidad de animarlo. En los casos en que puede animar completamente una vista antes de pasar al nuevo estado, no hay problema. Solo es el caso en el que tanto las vistas antiguas como las nuevas deben ser visibles, lo cual es problemático.

Parece que algunas de las funcionalidades necesarias para animar tanto el contenido de salida anterior y el nuevo se añadió en this commit, pero no estoy seguro de entender cómo usarlo.

También ha habido cierto debate sobre el uso de las rutas de transición/estados adicionales para modelar explícitamente el "intermedio", afirma que las animaciones pueden representar (here y here), pero no estoy seguro si es posible en la actualidad para que coincida con este enfoque con controladores y vistas con salida.

Esto es similar a How *not* to destroy View when exiting a route in Ember.js, pero no estoy seguro de anular el outlet helper es una buena solución.

¿Alguna idea?

Answer 1

Debe verificar esto: https://github.com/billysbilling/ember-animated-outlet.

A continuación, puede hacer esto en sus plantillas Manillares:

{{animatedOutlet name="main"}} 

y la transición desde el interior de una ruta como esta:

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

Answer 2

Actualmente estoy redefiniendo didInsertElement y willDestroyElement en algunas de mis clases de vista para admitir animaciones. didInsertElement inmediatamente oculta el elemento y luego lo anima a la vista. willDestroyElement clona el elemento y lo anima a que no se vea.

didInsertElement: function() 
{ 
    this.$().slideUp(0); 
    this.$().slideDown(250, "easeInOutQuad"); 
}, 

willDestroyElement: function() 
{ 
    var clone = this.$().clone(); 
    this.$().replaceWith(clone); 
    clone.slideUp(250, "easeInOutQuad"); 
} 

Personalmente, no quiero empezar a envolver mis puntos de venta en ContainerViews superfluos sólo para apoyar animaciones.