Usually, with Blaze and MeteorJS reactive collections, we want to perform animation in lists while adding or removing items from the collection. Let's see how to animate a reactive list's manipulation.
Create a MeteorJS application, such as AnimationPartyBlaze, and a collection by prepending the following code to AnimationPartyBlaze.js:
MyList = new Mongo.Collection("my_list");Create a template that shows the list of documents from the collection we have created and append it to AnimationPartyBlaze.html, as follows:
<template name="mylist">
<div>
<ul>
{{#each list}}<li>{{this.name}}</li>{{/each}}
</ul>
</div>
</template>We have to provide a helper that passes the collection to the template. Create a template helper in AnimationPartyBlaze.js for the preceding template and return the collection, as follows:
Template.mylist.helpers({
list: function() {
return MyList.find({});
...