当我改变页面路由时，如何实现页面动画？

Question

我正在为移动端开发基于Meteor的应用程序，因此，我希望在你离开模板时使某些元素动画化。然而，目前我遇到了一个难题，即如何延迟路由运行，直到动画运行完毕。我可以设置延迟时间，并将所有动画都适配到该计时器中。

因此，我尝试使用Iron Router的"onStop"函数触发速度动画，我还尝试使用Template.foo.destroyed回调，但是虽然我可以编写动画，但我无法让它们在加载下一个模板之前显示出来。如果有更可靠的方式基于路由更改触发动画，我愿意尝试其他方法。

- Jordan Whalen

Answer 1

未来Meteor将会提供更好的动画支持。

目前，您可以使用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属性和动画。

- sbking