Meteor 如何处理实时变化?例如,我不希望更改是瞬时的,但需要某种动画。如果我们使用 css 动画/过渡来放置要更改的项目,这可行吗?旧版浏览器的 jQuery 动画怎么样?
最佳答案
这是一个带有 meteor 的简单动画的工作示例。
这里的情况是我们有一个项目列表。如果用户点击其中任何一个项目,该项目将向左移动 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 代码。
<罢工>罢工>
<罢工>.myItem { transition: all 200ms 0ms ease-in; }
.selected { left: -20px; }
罢工><罢工>罢工>
关于meteor - Meteor实时变化可以有动画吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10861544/