流星动画
Meteor Animation
我正在尝试实现一个动画,其中一个项目在被选中后向左动画化。以下代码有效。但只有大约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 {}
如果每次都能看到如何制作动画的想法,那就太好了。
更新
克拉布得到了正确的答案。异常来自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"
});
}
};
(我们实际上不需要其他块,因为如果流星重新绘制项目,它会删除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");
}
});
};
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 如何使用铁流星与流星的默认路线
- 如何使用jQuery在动画中期加速动画
- 流星中的动画
- 流星:动画(淡入/淡出)动态模板数据
- 流星与JQuery或动画的交互
- 流星动画
- 动画实时变化的流星问题
- 流星动画添加的项目
- 流星:删除一个帖子,并用_uihooks将其他帖子动画化
- 在流星JS,如何控制Javascript加载顺序相对于DOM加载顺序?为动画