javascript - 我如何在更改路线时为页面制作动画？

Question

我正在开发一个基于 meteor 的移动应用程序，因此，我试图在您离开模板时让某些元素动画消失。我目前对如何延迟路线的运行感到困惑，直到动画运行之后。我可以专门设置延迟，只需将所有动画放入该计时器即可。

到目前为止我尝试做的是使用 Iron Routers 的“onStop”函数来触发速度动画，我也尝试使用 Template.foo.destroyed 回调，但是虽然我可以编写动画，但我不能让它们在加载下一个模板之前出现。如果它是一种更可靠的基于路线变化触发动画的方法，我愿意完全尝试其他方法。

Answer 1

Meteor will be getting better support for animations in the future.

现在，您可以使用 Meteor 未记录的 _uihooks 功能。例如，假设您有一个名为 layout 的布局模板，并且您的所有路由都直接在来自 layout 的父容器内呈现带有顶级元素的模板:

<template name="layout">
  {{> banner}}
  {{> main}}
</template>

<template name="main">
  <main>
    {{> yield}}
  </main>
</template>

<template name="home">
  <article>
    <!-- Home page content wrapped in a container -->
  </article>
</template>

<template name="posts">
  <article>
    <!-- Route content wrapped in a container -->
  </article>
</template>

<template name="loading">
  <div>
    <i class="fa fa-spinner fa-spin"></i>
  </div>
</template>

Template.main.rendered = function() {
  var $window = $(window);
  var main = this.firstNode;

  main._uihooks = {
    insertElement: function(node, next) {
      var newPage = $(node);

      newPage.css("opacity", 0);
      main.insertBefore(node, next);
      newPage.animate({opacity: 1}, 300);
    },
    removeElement: function(node) {
      var oldPage = $(node);
      var offset = oldPage.offset();

      // Position the route container to be removed so that it doesn't get
      // pushed down by the new route's template.
      // This may be different for you depending on your layout.
      oldPage.css({
        width: oldPage.innerWidth(),
        position: 'absolute',
        top: offset.top - $window.scrollTop(),
        left: offset.left
      }).animate({opacity: 0}, 300, function() {
        oldPage.remove();
      });

      $window.scrollTop(0);
    }
  };
};

请注意，根据您的布局和所需动画的复杂性，您可能可以使用类和 CSS 过渡来完成这项工作，而不是强制设置 CSS 属性和动画。