Question

我正致力于基于流媒体的移动应用程序，因此，当您离开模板时，我试图让某些元素变得生气勃勃。就目前如何延迟路线运行直到动画运行之后，我目前感到难过。我可以专门设置延迟，并将所有动画都装入该计时器。

所以我到目前为止尝试做的是使用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属性和动画。

当我改变路线时，我将如何设置页面动画？

1 个答案: