页面转换完成时,在Meteor的Iron Router中暂停路由

Question

在我的Meteor应用程序中,我有一些复杂的页面动画,需要几秒钟才能完成(指导性动画优先于页面转换速度).

这里有一个出状态和在状态的动画.为简单起见,假设我需要淡出一个页面,然后淡入下一个页面,但我希望这些淡入淡出需要几秒钟.为此,我使用Meteor的铁路由器调用一些操纵CSS的动画函数.

LIB/router.js

animateContentOut = function(pause) {
    return $('#content').removeClass("animated fadeIn");
}
Router.onAfterAction(animateContentOut);

animateContentIn = function() {
    return $('#content').addClass("animated fadeIn");
}
Router.onAfterAction(animateContentIn);

这是基于Manuel Schoebel和fadeIn作品的精彩提示.但是,我的淡入淡出动画需要几秒钟.因此,用户只能看到fadeOut动画的前几个毫秒,因为它会启动,然后路由器会在动画完成之前快速导航到新路径.

所以我的问题是:如何告诉路由器等待动画完成或onAfterAction调用中的动作的setTimeout？动画离开页面的过程是否有更好的钩子？

Answer 1

这取决于产生页面变化的原因.如果它是一个链接/按钮/通用事件,那么您可以只注册下面的事件,而不是使用锚点href,并data-route在锚标记的属性中存储您想要移动的路径(如"/ home"):

Template.links.events({
    'click a': function(event) {
        var _currentTarget = event.currentTarget;
        $('#content').removeClass('animated fadeIn').on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function() {
            Router.current().redirect(_currentTarget.attributes['data-route'].value);
        });
    }
});

这应该开始淡出,并且实际上在更改路线之前等待它结束.一些警告:

1. 如果用户手动更改网址,它将不会为您做任何事情,并且您必须将其添加到更改页面的每个逻辑部分 - 为了避免这些问题中的任何一个,您可能需要选择铁 - 路由器代码并找到一种挂钩页面更改的方法,我目前无法做到这一点!
2. 我还没有测试过跨浏览器,但它在Chrome中运行良好.
3. 根据我的经验,你需要小心currentTargetMeteor中一个事件的属性 - 我认为它不会总能给你你期望的东西,但这是我需要单独处理的事情.