誰かが状態遷移をアニメーション化する良い方法を見つけましたか?
ルーターはすぐにビューをDOMから削除します。それに関する問題は、アニメーションが終了するまでそれを延期できないことです。注:私はv1.0.0-pre.4を使用しています。
Billy's Billingは、アニメーション化されたトランジションをサポートする Emberモジュール をリリースしました。
これはかなり古いことは知っていますが、今日のこのコンテキスト固有のアニメーションの最善の解決策は、おそらく 残り火の液体の火 です。
これにより、遷移ファイルで次のようなことができます。
export default function(){
this.transition(
this.fromRoute('people.index'),
this.toRoute('people.detail'),
this.use('toLeft'),
this.reverse('toRight')
);
};
Lesykの答えをさらに詳しく説明します。 DRYの方法で複数のビューに適用する必要がある場合は、次のようなカスタマイズクラスを作成できます。
App.CrossfadeView = {
didInsertElement: function(){
//called on creation
this.$().hide().fadeIn(400);
},
willDestroyElement: function(){
//called on destruction
this.$().slideDown(250);
}
};
次に、コードでそれをさまざまなビュークラスに適用します。 EmberはjQueryに依存するため、ほとんどすべてのjQueryアニメーションを使用できます。
App.IndexView = Ember.View.extend(App.CrossfadeView);
App.PostView = Ember.View.extend(App.CrossfadeView);
私のアプリでこれと同じ要件に遭遇しました。試しました Ember Animated Outlet ですが、必要な粒度(要素固有のアニメーション)が得られませんでした。
私のために働いた解決策は次のとおりでした-
linkToをactionに変更します
{{#linkTo "todos"}}<button>Todos</button>{{/linkTo}}
になる...
<a href="#/todos" {{action "goToTodos"}}><button>Todos</button></a>
現在のコントローラーでgoToTodosのメソッドを作成します
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');
});
}
});
最後に-Todosテンプレートの要素をアニメーション化するには、ビューでdidInsertElementを使用します
App.TodosView = Ember.View.extend({
didInsertElement: function(){
// Hide Everything
this.$().hide();
// Do Element Specific Animations Here
$('#something_else').fadeIn(500);
}
});
これまでのところ、これはトランジションの要素固有のアニメーションに対して私が見つけた最もエレガントなソリューションです。もっと良いものがあれば、聞いてみたいです!
ビューにアニメーションを実装する別のドロップインソリューションを見つけました: ember-animate
例:
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);
}
}
デモ: 作者の個人ウェブサイト
App.SomeView = Ember.View.extend({
didInsertElement: function(){
//called on creation
this.$().hide().fadeIn(400);
},
willDestroyElement: function(){
//called on destruction
this.$().slideDown(250)
}
});