Meteorはライブの変更をどのように処理しますか?たとえば、変化を瞬時にしたくはありませんが、ある種のアニメーションを使用します。cssアニメーション/トランジションを使用して変更されるアイテムを配置した場合、これは機能しますか?古いブラウザのjQueryアニメーションはどうですか?
5902 次
3 に答える
12
これは流星を使った簡単なアニメーションの実例です。
ここでの状況は、アイテムのリストがあるということです。ユーザーがこれらのアイテムのいずれかをクリックすると、アイテムは左に 20px アニメーション化されます。
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; }
于 2013-07-18T12:15:45.320 に答える
5
次のような回避策があります。
<template name="foo">
..content..
{{bar}}
</template>
この場合Template.foo.bar
、このテンプレートがレンダリングされるたびに Meteor が呼び出されます。したがって、この関数内で、あらゆる種類の Jquery または CSS3 アニメーションを実行できます (たとえば、テンプレート div にクラスを追加することによって)。
于 2012-06-04T10:18:12.570 に答える
2
CSS トランジションの場合、次の 2 つのオプションを使用できます。
1. Reactively: the Meteor way
2. Directly: the jQuery way
これが実際の例です: http://bindle.me/blog/index.php/658/animations-in-meteor-state-of-the-game
于 2013-11-17T07:46:09.183 に答える