流星动画
我试图实现一个动画，其中一个项目在被选中后向左移动。 以下代码有效。 但只有大约80％的时间。
JS
//myItem
Template.myItem.rendered = function(){
if(Session.get("selected_item") === this.data._id){
$(this.firstNode).addClass("selected");
} else {
$(this.firstNode).removeClass("selected");
}
};
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; }
我还尝试将代码包装到Meteor.defer()以确保所有内容都准备好进行动画制作。
Template.myItem.rendered = function(){
Meteor.defer(function() {
if(Session.get("selected_item") === this.data._id){
$(this.firstNode).addClass("selected");
} else {
$(this.firstNode).removeClass("selected");
}
});
};
但是这会导致这种错误：
Exception from defer callback: TypeError {}
看到任何想法如何使动画每次都能工作真是太棒了。
UPDATE
克拉得到了正确的答案。 this参考来自例外。 我想添加一些细节。 所以这里有两个关于如何做动画的工作版本：
与Meteor.defer()
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"
});
}
};
（我们实际上并不需要else块，因为如果流星将重绘物品，它将移除selected类。）
或用$().animate()
Template.myItem.rendered = function(){
if(Session.get("selected_item") === this.data._id){
$(this.firstNode).animate({
left: "-20px"
}, 300);
}
};
如果您使用jQuery方法，则需要删除CSS代码。
.myItem { transition: all 200ms 0ms ease-in; }
.selected { left: -20px; }
试试这个，因为this指针在延迟回调方面与代码直接在渲染回调中执行是不一样的
Template.myItem.rendered = function(){
var self = this;
Meteor.defer(function() {
if(Session.get("selected_item") === self.data._id){
$(self.firstNode).addClass("selected");
} else {
$(self.firstNode).removeClass("selected");
}
});
};
上一篇: Meteor Animation