Animating new data as it arrives in Meteor

Question

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.

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.

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 ?

Thanks

Answer 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:

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 highlight { from {background-color: yellow;} to {background-color: white;} } .animate { animation: highlight 1s; }

Hope it works for you.