简体   繁体   English

流星:动画(淡入/淡出)动态模板数据

[英]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. 在我的Meteor模板中,我使用each迭代一个名为asks的辅助数组变量,其数组内容是动态变化的。 This is displaying properly in Meteor, however, by default, there is no animation to it. 这在Meteor中正确显示,但默认情况下没有动画。 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. 如果asks[1]是相同的,什么都不做。 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. 但是如果问题asks[2]发生了变化,则淡出旧的<tr>以获得asks[2]并使用新的asks[2]值淡入新的<tr> How can this be achieved? 怎么能实现这一目标? Thanks! 谢谢!

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

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

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM