Router, prese e animazione Ember.js

Question

Sembra che se si desidera animare una transizione tra stati utilizzando il nuovo router e le uscite di Ember.js, si è sfortunati, dal momento che il precedente contenuto di una presa sarà distrutto prima che tu abbia la possibilità di animarlo. Nei casi in cui è possibile animare completamente una vista prima di passare al nuovo stato, non ci sono problemi. È solo il caso in cui sia le vecchie che le nuove viste devono essere visibili, il che è problematico.

Sembra che alcune delle funzionalità necessarie per animare sia il contenuto di uscita precedente e il nuovo è stato aggiunto in this commit, ma non sono sicuro di capire come usarlo.

C'è stata anche qualche discussione su come utilizzare in più percorsi di transizione/stati per modellare esplicitamente la "in-between", afferma che le animazioni possono rappresentare (here e here), ma non sono sicuro se è attualmente possibile abbinare questo approccio con controller e viste outletted.

Questo è simile a How *not* to destroy View when exiting a route in Ember.js, ma non sono sicuro di ignorare l'helper outlet è una buona soluzione.

Qualche idea?

Answer 1

Si dovrebbe verificare questo: https://github.com/billysbilling/ember-animated-outlet.

Poi si può fare questo in manubrio modelli:

{{animatedOutlet name="main"}} 

e la transizione dall'interno di un percorso come questo:

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

Answer 2

Attualmente sto ignorando didInsertElement e willDestroyElement in alcune delle mie classi di visualizzazione per supportare le animazioni. didInsertElement nasconde immediatamente l'elemento e lo anima in vista. willDestroyElement clona l'elemento e lo anima fuori dalla vista.

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

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

Personalmente, non voglio iniziare avvolgendo i miei punti vendita in ContainerViews superflui solo per sostenere le animazioni.