Meteor 实时更改可以有动画吗? [英] Can Meteor live changes have animations?

问题描述

Meteor 如何处理实时更改?例如，我不希望更改是即时的，而是使用某种动画.如果我们使用 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.

这里的情况是我们有一个项目列表.如果用户点击这些项目中的任何一个，该项目将向左移动 20 像素.

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; }

这篇关于Meteor 实时更改可以有动画吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！