Ember.js de enrutamiento, outlets y animación.

ember-old-router

Question

Parece que si desea animar una transición entre estados utilizando el nuevo enrutador Ember.js y los puntos de venta, no tendrá suerte, ya que el contenido anterior de un punto de venta se destruirá antes de que tenga la oportunidad de animarlo. En los casos en que puede animar completamente una vista antes de pasar al nuevo estado, no hay problema. Es solo el caso de que tanto las vistas antiguas como las nuevas deben ser visibles, lo que es problemático.

Parece que algunas de las funciones necesarias para animar tanto el contenido de la salida anterior como el nuevo se agregaron en este compromiso , pero no estoy seguro de entender cómo usarlo.

También se ha discutido sobre el uso de rutas / estados de transición adicionales para modelar explícitamente los estados "intermedios" que pueden representar las animaciones ( here y here ), pero no estoy seguro si actualmente es posible hacer coincidir este enfoque con los controladores de salida. y vistas.

Esto es similar a Cómo * no * para destruir la Vista al salir de una ruta en Ember.js , pero no estoy seguro de que anular la ayuda de outlet es una buena solución.

¿Algunas ideas?

Answer 1

Actualmente estoy anulando 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 fuera de la vista.

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 comenzar a envolver mis puntos de venta en ContainerViews superfluos solo para admitir animaciones.

Answer 2

Debería revisar esto: https://github.com/billysbilling/ember-animated-outlet .

Entonces puedes hacer esto en tus plantillas de manillares:

{{animatedOutlet name="main"}}

Y la transición desde dentro de una ruta como esta:

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