页面转换完成时，在Meteor的铁路由器中暂停路由 [英] Pause routing in Meteor's Iron Router while a page transition completes

问题描述

在我的Meteor应用程序中，我有一些复杂的页面动画，需要几秒钟完成（指导性动画优先于页面转换速度）。

In my Meteor app I have some complex page animations that require a few seconds to complete (instructive animations take priority over page transition speed).

动画中有 out 状态和 状态。为了简单起见，让我们说，我需要淡出一个页面，然后淡入下一个，但我希望这些淡出花费多秒。为此，我使用Meteor的铁路由器调用一些操作CSS的动画函数。

There's an out state and an in state in the animation. For simplicity's sake, let's say I need to fade out one page, and then fade in the next, but that I want those fades to take multiple seconds. To do this I use Meteor's Iron Router to call some animation functions that manipulate the 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动画的前几毫秒，因为它开始，然后路由器在动画完成之前快速导航到新路线。

This is based on a great tip from Manuel Schoebel and the fadeIn works. However, my fade animation takes several seconds. So the user only sees the first few miliseconds of the fadeOut animation because it starts and then the router quickly navigates away to the new route before the animation completes.

所以我的问题，是：我如何告诉路由器等待动画完成或onOfterAction调用的动作setTimeout？

So my question, is: how can I tell the router to wait for the animation to complete or for a setTimeout on an action in the onAfterAction call? Is there a better hook to use when animating the process of leaving a page?

推荐答案

这取决于生成页面变化的原因。如果它是一个链接/按钮/通用事件，那么不是使用锚点href，你可以注册一个事件，如下所示，并存储你想移动的路径（如/ home）在 data-route 属性：

It depends what's generating the change of page. If it's a link/button/generic event, then rather than using an anchor href, you could just register an event like below, and store the route you want to move to (like "/home") in the data-route attribute of the anchor tag:

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);
        });
    }
});

这应该开始淡出，实际上等待它结束，然后改变路由。几个警告：

That should begin the fade out, and actually wait for it to end before changing the route. A few caveats:

1. 如果用户手动更改网址，它不会为您执行任何操作，您必须添加到每一块改变页面的逻辑 - 为了避免这些问题，你可能需要分开铁路由器代码，并找到一种方法钩住页面更改，我目前不能在现在做


2. 我没有测试跨浏览器，但在Chrome中可以正常工作。


3. 根据我的经验， code> currentTarget Meteor中的一个事件的属性 - 我不认为它会总是给你你期望的，但这是我需要单独占用。

1. It won't do anything for you if the user manually changes the url, and you'll have to add it to every piece of logic that changes page - to avoid either of these problems you'll probably have to pick apart the iron-router code and find a way to hook into page changes, which I'm not in a position to do at present!
2. I haven't tested cross-browser, but it works fine in Chrome.
3. In my experience you need to be careful with the currentTarget property of an event in Meteor - I don't think it will always give you what you expect, but this is something I need to take up separately.

这篇关于页面转换完成时，在Meteor的铁路由器中暂停路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！