Les changements en direct de Meteor peuvent-ils avoir des animations?

Comment Meteor gère-t-il les changements en direct? Par exemple, je ne veux pas que les modifications soient instantanées, mais avec une sorte d’animation. Si nous plaçons les éléments modifiés en utilisant les animations / transitions CSS, cela fonctionne-t-il? Qu’en est-il des animations jQuery pour les anciens navigateurs?

Voici un exemple pratique d’une animation simple avec meteor.

La situation ici est que nous avons une liste d’articles. Si l’utilisateur clique sur l’un de ces éléments, l’élément animera 20px vers la gauche.

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(); } }); 

Modèles

   

CSS

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

Au lieu d’utiliser des CSS sophistiqués, vous pouvez également animer avec jQuery:

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

Mais alors vous devez supprimer le code CSS.

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

Il existe une solution de contournement comme celle-ci:

  

Dans ce cas, Meteor appelle Template.foo.bar chaque fois que ce modèle est rendu. Donc, dans cette fonction, vous pouvez faire toutes sortes d’animations Jquery ou CSS3 (par exemple en ajoutant une classe au modèle div).

Pour les transitions CSS, deux options s’offrent à vous:

 1. Reactively: the Meteor way 2. Directly: the jQuery way 

Voici un exemple de travail: http://bindle.me/blog/index.php/658/animations-in-meteor-state-of-the-game