Can Meteor live changes have animations?

Question

How does Meteor handle live changes? For instance I don't want changes to be instantaneous, but with some kind of animation of sorts. If we place the items being changed using css animations/transitions does this work? What about jQuery animations for older browsers?

Answer 1

Here is a working example of a simple animation with meteor.

The situation here is that we have a list of items. If the user clicks on any of those items the item will animate 20px to the left.

JS

//myItem Template.myItem.rendered = function(){   var instance = this;   if(Session.get("selected_item") === this.data._id){     Meteor.defer(function() {         $(instance.firstNode).addClass("selected"); //use "instance" instead of "this"     });   } };  Template.myItem.events({   "click .myItem": function(evt, template){     Session.set("selected_item", this._id);   } });   //myItemList Template.myItemList.helpers({   items: function(){     return Items.find();   } }); 

Templates

<template name="myItem">   <div class="myItem">{{name}}</div> </template>  <template name="myItemList">   {{#each items}}     {{> myItem}}   {{/each}} </template> 

CSS

.myItem { transition: all 200ms 0ms ease-in; } .selected { left: -20px; } 

Instead of using fancy CSS you can also animate with jQuery:

Template.myItem.rendered = function(){   if(Session.get("selected_item") === this.data._id){     $(this.firstNode).animate({       left: "-20px"     }, 300);   } }; 

But then you need to remove the CSS code.

.myItem { transition: all 200ms 0ms ease-in; } .selected { left: -20px; } 

Answer 2

There is a workaround like this:

<template name="foo">   ..content..   {{bar}} </template> 

In this case Meteor will call Template.foo.bar everytime this template gets rendered. So within this function you can do all kinds of Jquery or CSS3 animations (for example by adding a class to the templates div).