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

Use the _uihooks - here's a great article describing it: http://www.webtempest.com/meteorjs-animation