流星中的页面转换？答案

【问题标题】：Page transitions in meteor?流星中的页面转换？
【发布时间】：2014-07-03 22:59:08
【问题描述】：

我有一个流星移动应用程序在结构上工作；我真的需要将视图与一些页面转换缝合在一起。

我查看了iron-transitioner 项目，但看起来开发已经停止？（上次提交 6 个月前，仍在使用 Spark 引擎）

我还查看了一些 UI“移动框架”（Ratchet、Framework7），但无法让它们与流星服务器很好地配合使用。

我想知道是否有人知道我可以尝试的任何其他简单（左/右）页面转换包/脚本？这只是为了给我的 UI 一些（预期的）光滑度。

【问题讨论】：

标签： meteor iron-router meteor-blaze

【解决方案1】：

一些带有 IronRouter 的 jQuery 怎么样？

Router.configure({
  load: function() {
    $('.content').animate({
      left: "-1000px",
      scrollTop: 0
    }, 400, function() {
        $(this).animate({ left: "0px" }, 400);
    });
});

为了在页面之间实现平滑过渡，我还使用简单的淡入/淡出。

Router.configure({
  load: function() {
    $('html, body').animate({
      scrollTop: 0
    }, 400);
    $('.content').hide().fadeIn(800);
  }
});

【讨论】：

感谢 Julien，这是一个不错的简单方法！我想尽可能使用一些 CSS3 过渡，因为它们会更平滑，而且我还想给出方向说明。也许我需要编写一个可以将一些信息传递给（转换、元素等）的函数？我还应该尝试在加载方法中使用它吗？例如load: pageTrans('left', '#mainContent') ?
是的，我认为 load 方法是执行此类操作的理想场所。 :)
我和你在同一条船上。 blaze 分支是最新的：github.com/percolatestudio/iron-transitioner/tree/blaze
自从我发布这个问题以来，铁过渡分支没有改变，最后一次签到是 22 天前（5 月 7 日），仍然指的是旧的 {{yield}} 等跨度>
嗯，好的。我设法使用该软件包使转换工作变得非常容易。然而，选择有些有限。不同路线之间的转换是不可能的。您是否设法让所有内容都使用 CSS3 动画？

【解决方案2】：

我有一个similar question here。让我们知道上面的 JQ 方法是如何工作的！如果你添加transit.js，你会得到很好的硬件转换。 FWIW 我认为 Percolate 团队正在为他们的 Verso 移动应用程序使用 IronTransitioner 版本，它有一些不错的 CSS3 过渡。你试过IronTransitioner 包吗？正如您所说， /devel/ 甚至 6 个月都没有被触及。

EDIT percolateStudio fork of IT 有这样的评论“好吧，几乎似乎正在使用 blaze。”

【讨论】：

【解决方案3】：

我建议使用animate.css 库并将动画类添加到模板的主要内容中。我的“主要”模板现在看起来像这样：

<template name='home'>
{{> navbar}}

<div class="container animated fadeIn" id="content">
    {{> startBox}}
</div>

{{> notification}}

<div id='background-image'></div>
<div id='background-color'></div>

{{> footer}}</template>

【讨论】：