Question

使用Meteor库，如果使用他们的（Spacebars）模板生成HTML，它可以很好地处理“反应”/“双向绑定”交互样式。但是，当数据发生变化时，我想要做一些动画的入口/出口，并且难以让它工作。

用例是我有一个仪表板量表窗口小部件呈现为SVG元素。当驱动仪表的数据更新时，我希望针可以动画到新的位置，而不仅仅是在那里拍摄。

要使针头刚刚抓住新位置，我可以执行以下操作：

template.html

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

client.js

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

这实际上与Meteor附带的SVG clock example使用的技术相同。

但我怎样才能转换那个动画？我正在考虑将集合中的新值推送到Session集合中，以便单独的animate()方法可以找到它，并使用Tracker.autorun()来使其成为Reactive，但我无法使用让它正确触发。