Animation in Blaze templates
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({});
...