¿Los cambios en vivo de Can Meteor tienen animaciones?

Question

¿Cómo maneja Meteor los cambios en vivo? Por ejemplo, no quiero que los cambios sean instantáneos, sino con algún tipo de animación. Si colocamos los elementos que se cambian usando css animaciones/transiciones, ¿funciona esto? ¿Qué pasa con las animaciones jQuery para navegadores antiguos?

Answer 1

Aquí hay un ejemplo práctico de una animación simple con meteoro.

La situación aquí es que tenemos una lista de elementos. Si el usuario hace clic en alguno de esos elementos, el elemento se animará 20 píxeles a la izquierda.

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

plantillas

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

En lugar de utilizar CSS de lujo también se puede animar con jQuery:

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

Pero luego debe eliminar el código CSS.

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

Answer 2

Hay una solución como esta:

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

En este caso Meteor llamará Template.foo.bar cada vez que esta plantilla se rindió. Por lo tanto, dentro de esta función puede realizar todo tipo de animaciones de Jquery o CSS3 (por ejemplo, agregando una clase al div de plantillas).

Answer 3

Para transiciones CSS, hay dos opciones que puede ir con:

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

Aquí es un ejemplo de trabajo: http://bindle.me/blog/index.php/658/animations-in-meteor-state-of-the-game