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!
fonte
2013-07-10 07:32:34
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