6

私は、異なるコンセントを接続する間にいくつかのアニメーション化されたトランジションを作成しようとしています. willInsertElement、didInsertElementまたはwillDestroyElementオーバーライドできるViewクラスのようなメソッドがあることは知っていますが、要素の追加または特に削除を延期することはできません。私は他のメソッドをオーバーライドしようとしていましたが、ビュークラスはそれがどのように機能するかを理解するのが複雑すぎます. 私はいくつかのアイデアを思いつきました：

jsfiddle の例

    AnimationHelper = Ember.Object.extend({
        isPreviousViewFadedOut:false,
        nextViewToFadeIn:null,
        triggerManually: true,
        setNextViewToFadeIn:function (view) {
            if (this.nextViewToFadeIn) {
                if (this.hasObserverFor('isPreviousViewFadedOut')) {
                    this.removeObserver('isPreviousViewFadedOut', this.nextViewToFadeIn, 'fadeInCallback');
                }
            }
            this.nextViewToFadeIn = view;
            this.addObserver('isPreviousViewFadedOut', this.nextViewToFadeIn, 'fadeInCallback');
        }
    });

    AnimatedView = Ember.View.extend({
        didInsertElement:function () {
            this.$().hide();

            if (AnimatedView.aHelper.get('triggerManually')) {
                AnimatedView.aHelper.set('isPreviousViewFadedOut', true);
                this.fadeInCallback();

                //next time we don't want call fadeInCallback manually
                AnimatedView.aHelper.set('triggerManually', false);
            } else {
                AnimatedView.aHelper.setNextViewToFadeIn(this);
            }
        },

        fadeInCallback:function () {
            if (AnimatedView.aHelper.get('isPreviousViewFadedOut')) {
                this.$().fadeIn(1000);
            }
        },

        willDestroyElement:function () {
            AnimatedView.aHelper.set('isPreviousViewFadedOut', false);
            var clone = this.$().clone();
            this.$().replaceWith(clone);

            var that = this;
            clone.fadeOut(1000, function () {
                $(this).remove();
                if (AnimatedView.aHelper.nextViewToFadeIn == that) {
                    AnimatedView.aHelper.removeObserver('isPreviousViewFadedOut',
                        AnimatedView.aHelper.nextViewToFadeIn, 'fadeInCallback');
                } else {
                    AnimatedView.aHelper.set('isPreviousViewFadedOut', true);
                }
            });
        }
    })

    AnimatedView.reopenClass({
        aHelper:new AnimationHelper()
    })

正常に動作しているように見えますが、これはおそらく非常に悪い設計です。同様の効果を達成するためのより良い方法はありますか？それとも、私は完全に間違っていて、問題を非常に異なる視点から見るべきでしょうか? たとえば、別のビューなどをラップするビュー内でアニメーションを行いますか?

4

2 に答える 2

0

少し前に、マスターにマージされたプル リクエストがありました。これはEm.ContainerView、アウトレットの 2 つのビュー間の非同期移行期間を許可するいくつかの追加のフックを追加しましたが、その変更は、エラーが発生したためにすぐに元に戻され、実際にはそうではありませんでした。 2 つのアウトレット ビュー間の遷移を可能にするための十分に議論されたアプローチです。

Ember コア チームは最近、アプリケーションのビューを一度に 1 つのビューのアウトレットを介して Router に結び付けるのを非常に簡単にすることに重点を置いていますが、そのようなシステムでは、実際には簡単に実行することはできません。しようとしています。ほとんどの場合、これらのトランジションが価値がある場合は、アウトレットをまったく使用せず、状態に出入りするときにビューを自分で手動で作成/追加/アニメーション化することをお勧めします。おそらく、Ember コアはいずれこの問題を再検討することになるでしょうが、v 1.0 がリリースされるまではそうは思わないでしょう。

Ember で構築された最近公開された Yapp アプリは、すべての「着陸」状態間のすべての遷移に対して状態を持つというアプローチを採用し、outlets をまったく使用しなかったと私は信じています。アプリは何人かの賢い人々によって構築され、非常にうまくいっているので、待機することは間違いなくアドバイスのようです.

于 2013-01-10T08:31:14.647 に答える
0

また、これらは大いに役立つかもしれません：

http://discuss.emberjs.com/t/animation-support-in-ember-1-1/1977

https://github.com/billysbilling/ember-animated-outlet

Ember で未回答のスタック オーバーフローの質問の数を減らすのに本当に役立つ回答を選択できれば。

于 2014-05-02T05:41:49.443 に答える