25

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

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

4

6 に答える 6

10

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

于 2013-04-09T23:01:08.193 に答える
7

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);
于 2013-07-05T09:41:56.653 に答える
7

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

これにより、トランジションファイルで次のようなことができます。

export default function(){
  this.transition(
    this.fromRoute('people.index'),
    this.toRoute('people.detail'),
    this.use('toLeft'),
    this.reverse('toRight')
  );
};
于 2015-03-10T20:42:44.867 に答える
6

私のアプリでこれと同じ要件に遭遇しました。Ember Animated Outletを試しましたが、必要な粒度（要素固有のアニメーション）が得られませんでした。

私のために働いた解決策は次のとおりでした-

linkToをアクションに変更します

{{#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);

    }
});

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

于 2013-07-10T07:32:34.623 に答える
4

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

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

于 2014-02-06T09:35:46.247 に答える
1 
App.SomeView = Ember.View.extend({
  didInsertElement: function(){
   //called on creation
   this.$().hide().fadeIn(400);
  },
  willDestroyElement: function(){
   //called on destruction
   this.$().slideDown(250)
  }
});
于 2013-01-25T17:42:34.253 に答える