Question

我尝试在连接不同的插座之间进行一些动画过渡。我知道View类上有willInsertElement，didInsertElement或willDestroyElement等方法可以覆盖，但不能推迟追加或特别是删除元素。我试图覆盖其他方法，但查看类是复杂的，以了解它是如何工作的。我提出了一些想法：

jsfiddle example

    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

一段时间之前有一个拉请求被合并到主服务器中，为Em.ContainerView添加了一些额外的挂钩，允许在一个插座中的两个视图之间存在异步过渡期，但是这个更改很快就被恢复了由于它导致错误，而且实际上并不是一个很好的讨论方法，允许在两个插座视图之间进行转换。

Ember核心团队最近一直专注于通过一次一个视图的方式将应用程序的视图与路由器联系起来非常容易，这样的系统实际上并不容易你想做什么。几乎可以肯定的是，如果这些转换对您有价值，您将根本不想使用插座，而是在进入和退出状态时自己手动创建/追加/动画视图。也许Ember核心会在某个时候再看一下这个问题，但在即将发布的v 1.0版本之前我不会指望它。

我确实认为最近发布的Ember内置的Yapp应用程序采用了在每个“登陆”状态之间的每个过渡状态，并且根本没有使用outlet s。该应用程序是由一些聪明的人建立的，并且做得很好，所以它看起来像是建议待命。

Answer 2

这些也可能有很大帮助：

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

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

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

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

2 个答案: