Question

我正在尝试设置路线之间的转换动画，我想使用jQuery，而不是ember-animated-outlet中的CSS3动画。

到目前为止，我已将{{link-to}}助手替换为将路由作为参数的操作。我在相关控制器中定义了此操作（淡出主{{outlet}}中的所有内容，然后调用transitionToRoute()）。然后我在新路线上使用afterModel钩子来淡化主{{outlet}}。

模板：

<li><a href="#/posts" {{action goToRoute 'posts'}}>Posts</a></li>

控制器：

App.ApplicationController = Ember.Controller.extend({
    actions: {
        goToRoute: function(route) {
            var that = this;
            $('.mainoutlet').fadeTo(200, 0, function() {
                that.transitionToRoute(route);
            });
        }
    }
});

路线：

App.PostsRoute = Ember.Route.extend({
    afterModel: function() {
        $('.mainoutlet').fadeTo(200, 1);
    }
});

这一切都运作良好，直到我在帖子路线上点击“帖子”链接。我不确定这是否是因为如果您已经在尝试转换到的路径（即使它似乎已记录），或{{1} } hook不是第二次调用（也许两者都有）。

我已尝试（有些失败）测试针对transitionToRoute()的路由参数，并且只有在它们不同的情况下淡出主afterModel，以确保转换实际上会发生。有没有其他方法可以确保在currentPath调用方法，无论我是否已经在那条路线上？或者确实是一种更好的方法吗？

Answer 1

而不是使用afterModel挂钩，更容易使用afterRender队列。如下所示：

App.ApplicationController = Ember.Controller.extend({
    _showOutletWithTransition: function() {
        $('.mainoutlet').fadeTo(200, 1);
    },
    actions: {
        goToRoute: function(route) { 
            var that = this;
            $('.mainoutlet').fadeTo(200, 0, function() {
                Ember.run(function() {
                    that.transitionToRoute(route);
                });                
                Ember.run.scheduleOnce('afterRender', that._showOutletWithTransition);
            });            
        }
    }
});

执行所有视图渲染时执行afterRender队列，并在dom中显示。这很适合你的情况。

这是一个有效的http://jsfiddle.net/marciojunior/HgKy3/

的jsfiddle

我希望它有所帮助

在Ember的路线之间制作动画

1 个答案: