Meteor: Animate (Fade In/Out) Dynamic Template Data

Question

In my Meteor template, I am using each to iterate over a helper array variable named asks whose array contents are dynamically changing. This is displaying properly in Meteor, however, by default, there is no animation to it. The changes are sudden, so it's hard to see exactly what is changing when. I would like to animate these data changes in the template. If asks[1] is the same, do nothing. But if asks[2] has changed, fade out the old <tr> for asks[2] and fade in the new <tr> with the new asks[2] values. How can this be achieved? Thanks!

{{#each asks}}
  <tr class="ask">
    <td>{{price}}</td>
    <td>{{amount}}</td>
  </tr>
{{/each}}

Answer 1

使用_uihooks - 这是一篇很棒的文章描述它： http ： //www.webtempest.com/meteorjs-animation

Answer 2

此外，这个软件包可能有所帮助： https ： //github.com/gwendall/meteor-template-animations它是基于DOM的，内部使用uiHooks，但更易于使用。

Answer 3

可以在https://github.com/webtempest/meteor-animate中找到导入Animate.css的动画混合中的另一个选项。