小编rob*_*k86的帖子

我尝试在连接不同的插座之间进行一些动画过渡.我知道有类似的方法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); …