Iron Router 路由与 Meteor 之间的动画页面转换答案

【问题标题】：Animated page transitions between Iron Router routes with MeteorIron Router 路由与 Meteor 之间的动画页面转换
【发布时间】：2015-02-01 05:45:10
【问题描述】：

目前，我发现在路线之间制作动画的唯一解决方案就是淡出当前页面onBeforeAction 并淡入新页面onAfterAction。但这只是蹩脚。

我想尝试执行some really sleek transitions like these。

我认为这需要同时在页面上呈现多个页面，但这似乎非常耗费资源，甚至似乎根本不使用铁路由器。

有什么想法可以实现吗？

【问题讨论】：

标签： meteor iron-router

【解决方案1】：

我使用这样的解决方案http://meteorpad.com/pad/5kii9SRbbnjiTHeQe

MeteorPad 不允许使用 IronRouter，所以我的示例没有使用它。在 IronRouter 中，您可以使用 action() 方法设置“currentPage”会话变量并始终呈现“transitioner”模板。像这样的：

Router.map(function() {
  this.route('home', {
    path: '/',
    action: function() {
      Session.set('currentPage', 'home');
      this.render('transitioner');
    }
  });

  this.route('about', {
    action: function() {
      Session.set('currentPage', 'about');
      this.render('transitioner');
    }
  });
});

我为此使用了一个包装器。它还可以帮助我定义过渡样式和方向。

请注意订阅/取消订阅，因为在过渡完成之前，上一页会对订阅更改做出反应！

【讨论】：

meteorpad 现在不适合我，但我知道你在这里做什么。不过好像很痛。但是话又说回来，我没有看到任何其他方法......：/
是的，我认为您可以以更有用的方式组织所有这些，但原则将保持不变。或者你可以等待Iron-Transitioner的更新，不过原理也是一样的，很久没有更新了。
嗯。谢谢您的帮助。让我看看我能想出什么
好主意！谢谢！
您的解决方案似乎很棒！我在路上，它工作得很好。不过我使用的是 Template.dynamic。

【解决方案2】：

这个问题似乎被问了很多，而且没有明确的解决方案，而且很多答案都变得陈旧，或者至少不适用于最新的 Iron-router 和 Meteor 1.0。

我只是搜索了一堆最好的答案，至少今天看来这个包是：

https://github.com/percolatestudio/momentum-iron-router/ 和 https://github.com/ccorcos/meteor-transitioner/

前者有一段时间没有更新，但有很多提交。后者的提交很少，但可能正在积极处理中。

我正在试用它们，所以如果我记得我会回来查看。

【讨论】：

嘿，我实际上只是做了后者。哈哈。我忘了这个问题
仅供参考 - 我刚刚在 Meteor 1.1.0.3 上尝试了这两种方法。我在使用 momentum-iron-router 时遇到了错误（以及其他一些人在问题页面上都有相同的问题。ccorcos:meteor-transitioner 工作得很好。很容易上手。