web-dev-qa-db-ja.com

Ember.jsルーター：状態遷移をアニメーション化する方法

誰かが状態遷移をアニメーション化する良い方法を見つけましたか？

ルーターはすぐにビューをDOMから削除します。それに関する問題は、アニメーションが終了するまでそれを延期できないことです。注：私はv1.0.0-pre.4を使用しています。

cssanimationember.jsrouter
25
david8401

Billy's Billingは、アニメーション化されたトランジションをサポートする Emberモジュール をリリースしました。

10
camdub

これはかなり古いことは知っていますが、今日のこのコンテキスト固有のアニメーションの最善の解決策は、おそらく 残り火の液体の火 です。

これにより、遷移ファイルで次のようなことができます。

export default function(){
  this.transition(
    this.fromRoute('people.index'),
    this.toRoute('people.detail'),
    this.use('toLeft'),
    this.reverse('toRight')
  );
};
7
max

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);
7
Bojan Markovic

私のアプリでこれと同じ要件に遭遇しました。試しました 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);

    }
});

これまでのところ、これはトランジションの要素固有のアニメーションに対して私が見つけた最もエレガントなソリューションです。もっと良いものがあれば、聞いてみたいです！

6
Stephen Sprinkle

ビューにアニメーションを実装する別のドロップインソリューションを見つけました： 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);
    }
}

デモ： 作者の個人ウェブサイト

4
Dmitry Pashkevich
App.SomeView = Ember.View.extend({
  didInsertElement: function(){
   //called on creation
   this.$().hide().fadeIn(400);
  },
  willDestroyElement: function(){
   //called on destruction
   this.$().slideDown(250)
  }
});
1
lesyk