6

我尝试在连接不同的插座之间进行一些动画转换。我知道有类似willInsertElement,didInsertElement或willDestroyElementon 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 等？

4

2 回答 2

0

这些也可能有很大帮助：

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

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

如果您可以选择一个对减少 Ember 上未回答的 Stack Overflow 问题数量非常有帮助的答案。

于 2014-05-02T05:41:49.443 回答
0

不久前有一个拉取请求被合并到 master 中，它添加了一些额外的钩子，Em.ContainerView这将允许插座中两个视图之间的异步过渡期，但是由于它导致错误而不是真正的，该更改很快就被恢复了是一种经过充分讨论的方法，允许在两个出口视图之间进行转换。

Ember 核心团队最近一直专注于通过一次一个视图的出口将应用程序的视图绑定到路由器变得非常容易，而这样的系统并不能真正让你轻松地做你想做的事重新尝试做。几乎可以肯定的是，如果这些转换对您很有价值，您将根本不想使用插座，而是在进入和退出状态时自己手动创建/附加/动画视图。也许 Ember 核心会在某个时候重新审视这个问题，但我不希望在即将发布的 v 1.0 版本之前看到它。

我确实相信最近发布的用 Ember 构建的 Yapp 应用程序采用了为每个“着陆”状态之间的每个转换都设置一个状态的方法，并且根本没有使用outlets。该应用程序是由一些聪明人开发的，并且运行良好，所以它绝对是一个建议。

于 2013-01-10T08:31:14.647 回答