meteor - Meteorのライブチェンジにアニメーションを含めることはできますか？

Question

Meteorはライブの変更をどのように処理しますか？たとえば、変化を瞬時にしたくはありませんが、ある種のアニメーションを使用します。cssアニメーション/トランジションを使用して変更されるアイテムを配置した場合、これは機能しますか？古いブラウザのjQueryアニメーションはどうですか？

Answer 1

これは流星を使った簡単なアニメーションの実例です。

ここでの状況は、アイテムのリストがあるということです。ユーザーがこれらのアイテムのいずれかをクリックすると、アイテムは左に 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; }

Answer 2

次のような回避策があります。

<template name="foo">
  ..content..
  {{bar}}
</template>

この場合Template.foo.bar、このテンプレートがレンダリングされるたびに Meteor が呼び出されます。したがって、この関数内で、あらゆる種類の Jquery または CSS3 アニメーションを実行できます (たとえば、テンプレート div にクラスを追加することによって)。

Answer 3

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