meteor可以改变有animation吗?

meteor如何处理实时变化? 例如,我不希望变化是瞬间的,而是用某种types的animation。 如果我们放置使用CSSanimation/转换更改的项目是否工作? 怎么样的旧版浏览器的jQueryanimation?

这是一个简单的meteoranimation的例子。

这里的情况是我们有一个项目清单。 如果用户点击这些项目中的任何一个项目将animation20px到左侧。

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,你也可以用jQueryanimation:

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

有一个解决方法是这样的:

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

在这种情况下,每当这个模板被渲染时,meteor将会调用Template.foo.bar 。 所以在这个函数中,你可以做各种Jquery或CSS3animation(例如,通过向模板div添加一个类)。

对于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