Question

Meteor如何处理实时更改？例如，我不希望变化是瞬时的，而是使用某种类型的动画。如果我们使用css设置更改项目动画/过渡是否有效？那些旧版浏览器的jQuery动画呢？

Answer 1

这是一个使用meteor的简单动画的工作示例。

这里的情况是我们有一个项目清单。如果用户点击任何这些项目，该项目将向左移动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; }

您可以使用jQuery动画，而不是使用花哨的CSS：

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>

在这种情况下，Meteor每次渲染此模板时都会调用Template.foo.bar。因此，在此函数中，您可以执行各种Jquery或CSS3动画（例如，通过向模板div添加类）。

Answer 3

对于CSS过渡，您可以使用两个选项：

1. Reactively: the Meteor way
2. Directly: the jQuery way

这是一个工作示例： http://bindle.me/blog/index.php/658/animations-in-meteor-state-of-the-game

流星直播改变有动画吗？

3 个答案: