动画新数据到达流星 [英] Animating new data as it arrives in Meteor

问题描述

我是新来的流星minimongo所以我有点失落，以什么做的，我已经做了研究，但由于我采用了棱角分明+流星，而不是走出一条也找不到了。

I'm new to meteor and minimongo so i'm a bit lost as to what to do , i've done research but couldn't find much since i'm using angular+meteor and not blaze.

我有我的服务器上集合，我的客户（角）的认购。每当一个新的元素添加到我的服务器收集客户端synscronise和更新minimongo和它的正常工作。

I have a collection on my server that is subscribed on my client ( angular). Every time a new element is added to my server collection the client synscronise and update minimongo and it's working fine.

现在我想风格这个新的事件，例如添加动画/淡出的背景颜色，当一个新的元素通过NG-添加到集合在我蒙戈的数据（对辅助迭代表（HTML）重复），但真的不能找到一个办法做到这一点正常。

Now i would like to style this new "event" ,for example adding an animation / fading background color when a new element is added to the collection in my table(html) of mongo data( iteration on the helper through ng-repeat) but can't really find a way to do that properly.

我发现光标它可能做的伎俩，但我有麻烦搞清楚我应该如何在我的角度前端实现它。

I've found Cursors and it might do the trick but i'm having trouble figuring out how should i implement it in my angular front end.

任何试图已经或可能指向我的方向我的研究？

Anyone tried that already or could point me in the direction for my research ?

感谢

推荐答案

您说得对 - 光标可能会做的伎俩。和 observeChanges 在特定的方法。因为你只问指点你进入的方向和我不熟悉Anguler，我没有提供整个code，只是一些建议：

You're right - cursor might do the trick. And observeChanges method in particular. Since you've asked only for pointing you into the direction and I am not familiar with Anguler, I am not providing the whole code, just some advice:

1. 填充与文件的ID您的表行元素以后能够访问它。 （＆LT; TR类=...数据ID =q1w2e3r4t5＆GT; ...＆LT; / TR＆GT; ）


2. 然后你可以观察者附加到你的光标，并添加CSS类新增加的元素： cursor.observeChanges（{补充：（ID）=＆GT; $（'[数据-ID = $ {ID}]'）。addClass（'动画'）}）



3. 要启用动画在CSS .animate 与任何你喜欢的动画某处定义。你可以找到关于这个其他职位SO中的帮助。它可以像f.e。

1. Populate your table row element with id of the document to be able to access it later. (<tr class="..." data-id="q1w2e3r4t5">...</tr>)
2. Then you can attach an observer to your cursor and add a CSS class to the newly added element: cursor.observeChanges({added: (id) => $('[data-id=${id}]').addClass('animate')})

3. To enable the animation define somewhere in your CSS .animate with whatever animation you like. You can find help among other SO posts regarding this. It could be like f.e.

@keyframes亮点{
    从{背景颜色：黄色;}
    为{背景颜色：白色;}
}
.animate {
  动画：亮点1秒;
}


希望它为你工作。

这篇关于动画新数据到达流星的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！