CODEWITHSUNDEEP
javascriptmeteor
Jon Cursi
Jon Cursi

Reputation: 3371

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

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}}

Upvotes: 6

Views: 1841

Answers (3)

akotian
akotian

Reputation: 3935

Another option added to the mix for animations, which imports Animate.css can be found here https://github.com/webtempest/meteor-animate.

Upvotes: 0

Gopalakrishna Palem
Gopalakrishna Palem

Reputation: 1715

Also, this package may be of help: https://github.com/gwendall/meteor-template-animations It is DOM based and internally uses uiHooks, but simpler to use.

Upvotes: 0

Rune Jeppesen
Rune Jeppesen

Reputation: 1131

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

Upvotes: 4

Related Questions