在新数据到达Meteor时动画化

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.

我是meteor和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.

我的服务器上有一个在我的客户端订阅的集合(有角度)。每次将一个新元素添加到我的服务器集合时,客户端会同步并更新minimongo并且它正常工作。

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.

现在我想设置这个新的“事件”样式,例如当一个新元素添加到我的mongo数据表(html)中的集合中时添加动画/渐变背景颜色(通过ng-repeat在辅助器上迭代)但是真的找不到办法做到这一点。

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 ?

有没有人试过或已经指出我的研究方向?

Thanks

2 个解决方案

#1

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:

你是对的 - 光标可能会成功。并特别观察变化方法。既然你只是要求你指明方向而且我不熟悉Anguler,我不提供整个代码,只是一些建议:

Populate your table row element with id of the document to be able to access it later. (<tr class="..." data-id="q1w2e3r4t5">...</tr>)

使用文档的id填充表行元素,以便以后可以访问它。 ( ... )

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

然后你可以将一个观察者附加到你的光标并向新添加的元素添加一个CSS类:cursor.observeChanges({added:(id)=> $('[data-id = $ {id}]')。addClass( '动画')})

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.

要使用您喜欢的任何动画,在CSS .animate中的某个位置启用动画定义。您可以在其他SO帖子中找到有关此问题的帮助。它可能像f.e.

@keyframes highlight { from {background-color: yellow;} to {background-color: white;} } .animate { animation: highlight 1s; }

@keyframes突出显示{from {background-color:yellow;} to {background-color:white;}} .animate {animation:highlight 1s; }

Hope it works for you.

希望对你有效。

#2

You are on the right track with Cursor. You can use cursor.observe(callbacks). You can listen for add event for example and do your animation when a new doc added.

你在Cursor的正确轨道上。您可以使用cursor.observe(回调)。例如,您可以侦听添加事件,并在添加新文档时执行动画。

#1