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

Question

In my Meteor pattern, I use each to iterate over a variable in a helper array called asks , the contents of which array is dynamically changing. This is correctly displayed in Meteor, however, by default there is no animation for it. The changes are sudden, so it’s hard to see exactly what is changing. 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, reduce the old <tr> for asks[2] and fade out in the new <tr> with the new values ​​of asks[2] . How can this be achieved? Thanks!

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

Answer 1

Use _uihooks - here is a great article describing this: http://www.webtempest.com/meteorjs-animation

Answer 2

In addition, this package can help: https://github.com/gwendall/meteor-template-animations It is based on the DOM and uses uiHooks internally, but is easier to use.

Answer 3

Another option added to the animation mix that Animate.css imports can be found here https://github.com/webtempest/meteor-animate .