Kann Meteor live Änderungen haben Animationen?

Question

Wie geht Meteor mit Live-Änderungen um? Zum Beispiel möchte ich nicht, dass Änderungen sofort erfolgen, sondern mit einer Art Animation. Wenn wir die Elemente, die geändert werden sollen, mit CSS-Animationen/Übergängen platzieren, funktioniert das? Was ist mit jQuery-Animationen für ältere Browser?

Answer 1

Hier ist ein Arbeitsbeispiel für eine einfache Animation mit Meteor.

Die Situation hier ist, dass wir eine Liste von Elementen haben. Wenn der Benutzer auf eines dieser Elemente klickt, animiert das Objekt 20 Pixel nach links.

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

Vorlagen

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

Statt Phantasie CSS verwenden, können Sie auch mit jQuery animieren:

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

Aber dann müssen Sie den CSS-Code entfernen.

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

Answer 2

Es gibt eine Abhilfe wie folgt aus:

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

In diesem Fall Meteor Template.foo.bar jedes Mal diese Vorlage gerendert wird nennen. Innerhalb dieser Funktion können Sie alle Arten von Jquery- oder CSS3-Animationen ausführen (zum Beispiel indem Sie eine Klasse zum Templates div hinzufügen).

Answer 3

Für CSS-Übergänge gibt es zwei Optionen können Sie gehen mit:

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

Hier ist ein funktionierendes Beispiel ist: http://bindle.me/blog/index.php/658/animations-in-meteor-state-of-the-game