Peut Meteor vivre des changements ont animations?

Question

Comment Meteor poignée de vivre des changements? Par exemple je ne veux pas de changements pour être instantané, mais avec une sorte d'animation de toutes sortes. Si l'on place les éléments d'être modifié à l'aide de css animations/transitions cela fonctionne? Ce propos de jQuery animations pour les anciens navigateurs?

Answer 1

Voici un exemple de travail d'une animation simple avec meteor.

La situation ici est que nous avons une liste d'éléments. Si l'utilisateur clique sur l'un quelconque de ces éléments, l'élément va animer 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

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

Au lieu d'utiliser de fantaisie CSS 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; }

Answer 2

Il y a une solution comme ceci:

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

Dans ce cas Meteor appel Template.foo.bar chaque fois que ce modèle est rendu. Dans cette fonction, vous pouvez faire toutes sortes de Jquery ou les animations CSS3 (par exemple par l'ajout d'une classe pour les modèles div).

Answer 3

Pour les transitions CSS, il y a deux options, vous pouvez aller avec:

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

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