动画视图过渡.如何推迟删除或插入元素？

Question

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

它似乎工作正常,但这可能是非常糟糕的设计.有没有更好的方法来达到类似的效果？或者我可能完全错了,应该从非常不同的角度看待问题？例如,在View中包含另一个View等的动画吗？

Answer 1

这些也可能有很大帮助：

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

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

如果您可以选择一个答案，那么它将真正有助于减少 Ember 上未回答的 Stack Overflow 问题的数量。