Braise.js routing, outlets et animation
il semble que si vous voulez animer une transition entre les États en utilisant la nouvelle braise.js routeur et les sorties, vous n'avez pas de chance, puisque le contenu précédent d'une sortie sera détruit avant que vous ayez une chance de l'animer. Dans les cas où vous pouvez animer complètement une vue avant la transition vers le nouvel état, il n'y a aucun problème. Ce n'est que dans les cas où les points de vue anciens et nouveaux doivent être visibles que cela pose problème.
il ressemble à certains des la fonctionnalité nécessaire pour animer à la fois le contenu de sortie précédent et le nouveau a été ajoutée dans this commit , mais je ne suis pas sûr de comprendre comment l'utiliser.
il y a aussi eu des discussions sur l'utilisation de routes/états de transition supplémentaires pour modéliser explicitement les États "Entre" que les animations peuvent représenter ( ici et ici ), mais je ne suis pas sûr qu'il soit actuellement possible de faire correspondre cette approche avec contrôleurs et vues outletted.
c'est similaire à Comment *ne pas détruire la vue en sortant d'une route dans Ember.js , mais je ne suis pas sûr de passer outre le helper outlet est une bonne solution.
des idées?
2 réponses
regardez ça: https://github.com/billysbilling/ember-animated-outlet .
alors vous pouvez le faire dans vos modèles de guidon:
{{animatedOutlet name="main"}}
et transition de l'intérieur d'une route comme celle-ci:
App.ApplicationRoute = Ember.Route.extend({
showInvoice: function(invoice) {
this.transitionToAnimated('invoices.show', {main: 'slideLeft'}, invoice);
}
});
je remplace actuellement didInsertElement et willDestroyElement dans certaines de mes classes de vue pour supporter des animations. didInsertElement cache immédiatement l'élément, puis l'anime. willDestroyElement clone l'élément et l'Anime hors de vue.
didInsertElement: function ()
{
this.$().slideUp(0);
this.$().slideDown(250, "easeInOutQuad");
},
willDestroyElement: function ()
{
var clone = this.$().clone();
this.$().replaceWith(clone);
clone.slideUp(250, "easeInOutQuad");
}
personnellement, je ne veux pas commencer à emballer mes points de vente dans des vues de contenu superflues juste pour supporter des animations.