meteor - 流星中的页面转换？

Question

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

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

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

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

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

Answer 2

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

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

Answer 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>