20

新しいEmber.jsルーターとアウトレットを使用して状態間の遷移をアニメーション化する場合は、アニメーション化する前にアウトレットの以前のコンテンツが破棄されるため、運が悪いようです。新しい状態に移行する前に1つのビューを完全にアニメーション化できる場合は、問題はありません。問題があるのは、古いビューと新しいビューの両方を表示する必要がある場合のみです。

以前のアウトレットコンテンツと新しいアウトレットコンテンツの両方をアニメーション化するために必要な機能の一部がこのコミットで追加されたようですが、その使用方法がわかりません。

アニメーションが表すことができる「中間」状態（こことここ）を明示的にモデル化するために追加の遷移ルート/状態を使用することについてもいくつかの議論がありましたが、このアプローチをアウトレットコントローラーと一致させることが現在可能かどうかはわかりませんとビュー。

これは、Ember.jsのルートを終了するときにViewを破棄しない方法に似ていますが、outletヘルパーをオーバーライドすることが適切な解決策かどうかはわかりません。

何か案は？

4

2 に答える 2

25

現在、アニメーションをサポートするために、一部のビュークラスでオーバーライドdidInsertElementしています。すぐに要素を非表示にしてから、アニメーション化して表示します。要素のクローンを作成し、表示されないようにアニメーション化します。willDestroyElementdidInsertElementwillDestroyElement

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

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

個人的には、アニメーションをサポートするためだけに、余分なContainerViewsでアウトレットをラップし始めたくありません。

于 2012-07-31T20:33:07.823 に答える
7

これをチェックする必要があります：https ：//github.com/billysbilling/ember-animated-outlet 。

次に、ハンドルバーテンプレートでこれを行うことができます。

{{animatedOutlet name="main"}}

そして、次のようなルート内から移行します。

App.ApplicationRoute = Ember.Route.extend({
    showInvoice: function(invoice) {
        this.transitionToAnimated('invoices.show', {main: 'slideLeft'}, invoice);
    }
});
于 2013-04-08T18:48:33.343 に答える