流星的生活變化有動畫嗎？

Question

流星如何處理實時變化？例如，我不希望變化是瞬間的，但有些種類的動畫。如果我們使用css動畫/轉換來放置正在改變的項目，這是否行得通？那些舊版瀏覽器的jQuery動畫怎麼樣？

Answer 1

下面是流星簡單動畫的一個工作示例。

這裏的情況是我們有一個項目列表。如果用戶點擊這些項目中的任何一個，該項目將向左移動20px。

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代碼。

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

Answer 2

有這樣的一種解決方法：

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

在這種情況下，流星會調用Template.foo.bar每次這個模板被渲染。所以在這個函數中，你可以做各種Jquery或CSS3動畫（例如通過向模板div添加一個類）。

Answer 3

對於CSS過渡，有兩個選項，你可以去：

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

這裏是一個工作示例： http://bindle.me/blog/index.php/658/animations-in-meteor-state-of-the-game