2

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

到目前为止，我已经用将{{link-to}}路由作为参数的操作替换了助手。我在相关控制器中定义了这个动作（淡出 main 中的所有内容{{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);
    }
});

这一切都很好，直到我已经在帖子路线上单击“帖子”链接。我不确定这是否是因为transitionToRoute()如果您已经在您尝试转换到的路线上（即使它似乎已记录），或者如果afterModel没有第二次调用钩子（也许两者兼而有之）。

我已经尝试（有点不成功）针对 测试路由参数，currentPath并且仅在它们不同时淡出主参数{{outlet}}，以确保实际发生转换。是否有另一种方法可以确保在 处调用方法PostsRoute，无论我是否已经在该路线上？或者确实有更好的方法来做到这一点？

4

1 回答 1

4

而不是使用 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 中。这将非常适合您的情况。

这是一个 jsfiddle 这个工作http://jsfiddle.net/marciojunior/HgKy3/

我希望它有帮助

于 2013-09-17T12:24:56.650 回答