流星ライブの変化にアニメーションを付けることはできますか？

Question

メテオールはどのようにライブ変更を処理しますか？たとえば、私は瞬間的な変更を望んでいませんが、何らかの種類のアニメーションが必要です。 CSSのアニメーション/トランジションを使用してアイテムを変更した場合、これは機能しますか？古いブラウザのjQueryアニメーションはどうですか？

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

この場合、流星は、このテンプレートがレンダリングされるTemplate.foo.bar毎回呼び出します。

Answer 1

流星のある単純なアニメーションの実例です。

ここでは、アイテムのリストがあります。ユーザーがこれらのアイテムのいずれかをクリックすると、そのアイテムは20ピクセル左に移動します。

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

テンプレート

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

代わりの空想CSSを使用して、あなたはまた、jQueryを使ってアニメーション化することができます

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

を

しかし、あなたはCSSコードを削除する必要があります。 CSSトランジションのために

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

Answer 2

このような回避策があります。したがって、この関数内では、JqueryやCSS3のアニメーションをすべて行うことができます（たとえば、テンプレートdivにクラスを追加するなど）。

Answer 3

、あなたが行くことができる2つのオプションがあります。ここでは

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

は実施例である： http://bindle.me/blog/index.php/658/animations-in-meteor-state-of-the-game