流星现场直播可以播放动画吗? [英] Can Meteor live changes have animations?
问题描述
流星如何处理实时变化?例如,我不希望更改是瞬时的,而是需要某种形式的动画.如果我们使用CSS动画/过渡放置要更改的项目,这行得通吗?较旧的浏览器的jQuery动画呢?
How does Meteor handle live changes? For instance I don't want changes to be instantaneous, but with some kind of animation of sorts. If we place the items being changed using css animations/transitions does this work? What about jQuery animations for older browsers?
推荐答案
这是一个带有流星的简单动画的有效示例.
Here is a working example of a simple animation with meteor.
这里的情况是我们有一个项目列表.如果用户单击其中任何一项,则该项将向左侧移动20px.
The situation here is that we have a list of items. If the user clicks on any of those items the item will animate 20px to the left.
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动画:
Instead of using fancy CSS you can also animate with jQuery:
Template.myItem.rendered = function(){
if(Session.get("selected_item") === this.data._id){
$(this.firstNode).animate({
left: "-20px"
}, 300);
}
};
但是随后您需要删除CSS代码.
But then you need to remove the CSS code.
.myItem { transition: all 200ms 0ms ease-in; }
.selected { left: -20px; }
这篇关于流星现场直播可以播放动画吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!