如何使用Meteor在入口/出口之间切换？

使用Meteor库，如果使用其（空格键）模板生成HTML，它可以很好地处理“反应”/“双向绑定”交互样式。然而，当数据发生变化时，我想做一些动画的出入口，但很难让它正常工作

用例是我有一个仪表板仪表小部件作为SVG元素呈现。当驱动仪表的数据更新时，我希望指针动画化到它的新位置，而不仅仅是在那里捕捉

要使针刚好卡到新位置，我可以执行以下操作：

template.html

<template name="gauge">
  <svg>
    <path id="needle" {{ needleAttrs }} d="..." />
  </svg>
</template>

这实际上是流星所使用的相同技术

---

但是我如何转换动画呢？我正在考虑将新值从集合中推送到会话集合中，这样一个单独的

animate（）

方法就可以找到它，并使用一些使其反应，但我无法使其正确触发。

Tracker.autorun（）

可以告诉您

MyCollection

已更改，但它只在查询级别进行监视，而不在单个项属性的精细级别进行监视。您需要保留上一个值并编写一个动画函数，该函数可以通过

setTimeout（）

、

setInterval（）

或类似方法启动。如果使用CSS设置x和y位置，则可以使用CSS转换来实现此目的。

Template.gauge.helpers({
  needleAttrs: function() {
    return {
      x: 50,
      y: MyCollection.findOne().needleValue
    };
  }
});