Qualcuno ha trovato un buon modo per animare le transizioni di stato?Router Ember.js: come animare le transizioni di stato
Il router rimuove immediatamente la vista dal DOM. Il problema è che non posso rimandarlo fino alla fine dell'animazione. Nota: sto usando v1.0.0-pre.4.
fatturazione di Billy appena rilasciato un Ember module che supporta transizioni animate.
Sto appena iniziando con Ember. La pagina collegata dice: "Cose da tenere a mente: [...] Le animazioni non vengono eseguite quando si passa allo stesso percorso con un modello diverso, a causa del modo in cui Ember riutilizza lo stesso elemento DOM e probabilmente non essere corretto fino a quando il supporto dell'animazione non entra nel core di Ember in 1.1. " Quindi la mia domanda - questa risposta è aggiornata? Qual è l'opzione migliore con emper 2.10 per animare i percorsi? – Benjamin
App.SomeView = Ember.View.extend({
didInsertElement: function(){
//called on creation
this.$().hide().fadeIn(400);
},
willDestroyElement: function(){
//called on destruction
this.$().slideDown(250)
}
});
conosco quegli ami, tuttavia nessuno di questi mi aiuta a portare a termine il lavoro. Il problema è che * didInsertElement * e * willDestroyElement * sono specifici per quella stessa vista. Per rendere uniforme una transizione, dovrei sapere se l'altra vista, quella su cui il router sta transitando, è pronta, quindi eseguire l'animazione/transizione e quindi rimuovere la vista precedente. Quindi, in altre parole, sto cercando un * più * ashaviour *. – david8401
Espanderò la risposta di Lesyk. Se avete bisogno di applicarla a più visualizzazioni in modo asciutto, è possibile creare una classe di personalizzazione come questo:
App.CrossfadeView = {
didInsertElement: function(){
//called on creation
this.$().hide().fadeIn(400);
},
willDestroyElement: function(){
//called on destruction
this.$().slideDown(250);
}
};
E poi nel codice si applica sulle vostre varie classi di visualizzazione. Dato che Ember dipende da jQuery puoi usare praticamente qualsiasi animazione jQuery.
App.IndexView = Ember.View.extend(App.CrossfadeView);
App.PostView = Ember.View.extend(App.CrossfadeView);
La fine del primo snippet di codice è errata, le parentesi non corrispondono :) Forse potresti modificarlo. – graup
L'animazione willDestroyElement non funziona per me (1.0-rc4). Sembra che la vista sia già andata prima del rendering dell'animazione. Hai un esempio funzionante? – graup
Ecco un esempio (incompleto) che usa quello. L'animazione funziona così: http://jsbin.com/imahog/21/edit Notate che sto usando rc6 tho, e che avevate ragione tra parentesi (fisso sopra). –
Utilizzato in questo stesso requisito nella mia app. Provato Ember Animated Outlet, ma non ha dato la granularità di cui avevo bisogno (animazioni specifiche degli elementi).
La soluzione che ha funzionato per me è stata la seguente -
Change linkto essere un azione
{{#linkTo "todos"}}<button>Todos</button>{{/linkTo}}
Diventa ...
<a href="#/todos" {{action "goToTodos"}}><button>Todos</button></a>
Creare un metodo per r goToTodos in regolatore di corrente
App.IndexController = Ember.Controller.extend({
goToTodos: function(){
// Get Current 'this' (for lack of a better solution, as it's late)
var holdThis = this;
// Do Element Specific Animation Here
$('#something').hide(500, function(){
// Transition to New Template
holdThis.transitionToRoute('todos');
});
}
});
Infine - Per animare negli elementi sul modello Todos, utilizzare didInsertElement sulla vista
App.TodosView = Ember.View.extend({
didInsertElement: function(){
// Hide Everything
this.$().hide();
// Do Element Specific Animations Here
$('#something_else').fadeIn(500);
}
});
Finora, questa è la soluzione più elegante I' trovato per animazioni specifiche degli elementi durante la transizione. Se c'è qualcosa di meglio, mi piacerebbe sentire!
Non stai parlando delle transizioni di stato se stai animando i singoli elementi. ember-animated-OUTLET è per punti vendita, che è presumibilmente diverso dal caso d'uso dell'OP. Inoltre, le azioni interrompono il supporto URL dell'app :-( – mpowered
ho trovato un'altra soluzione drop-in che implementa animazioni in Visualizzazioni: ember-animate
Esempio:
App.ExampleView = Ember.View.extend({
willAnimateIn : function() {
this.$().css("opacity", 0);
},
animateIn : function (done) {
this.$().fadeTo(500, 1, done);
},
animateOut : function (done) {
this.$().fadeTo(500, 0, done);
}
}
So che questo è piuttosto vecchio, ma il migliore la soluzione per questa animazione specifica del contesto oggi è probabilmente ember liquid fire.
Esso permette di fare cose come questa in un file di transizione:
export default function(){
this.transition(
this.fromRoute('people.index'),
this.toRoute('people.detail'),
this.use('toLeft'),
this.reverse('toRight')
);
};
Dato che EmberJS ha veramente fluttuato come un matto durante gli aggiornamenti, tutte le nuove informazioni su un vecchio post dovrebbero essere benvenute Quindi grazie – JakeGould
Link corrente per il fuoco liquido: https: //github.com/ember-animation/liquid-fire – Kelsin
grazie a @Kelsin, aggiornato per il collegamento – max
avete considerato aggiungendo le classi di transizione per la tua vista attraverso [ 'Ember.View # willDestroyElement'] (http: // emberjs. com/api/classes/Ember.View.html # event_willDestroyElement)? – MilkyWayJoe
fwow, la mia risposta di seguito su [ember liquid fire] (http://ember-animation.github.io/liquid-fire/) è considerata la migliore pratica oggi per questo tipo di situazione :) – max