javascript - meteor 动画

Question

我正在尝试实现一个动画，其中一个元素在被选中后向左移动。以下代码有效。但只有大约 80% 的时间。

JS

//myItem
Template.myItem.rendered = function(){
  if(Session.get("selected_item") === this.data._id){
    $(this.firstNode).addClass("selected");
  } else {
    $(this.firstNode).removeClass("selected");
  }
};

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

我还尝试将代码包装到 Meteor.defer() 中以确保一切都已准备就绪，可以开始制作动画。

Template.myItem.rendered = function(){
  Meteor.defer(function() {
    if(Session.get("selected_item") === this.data._id){
      $(this.firstNode).addClass("selected");
    } else {
      $(this.firstNode).removeClass("selected");
    }
  });
};

但这会导致这种错误:

Exception from defer callback: TypeError {}

很高兴看到任何关于如何使动画每次都能正常工作的想法。

更新

Krab得到正确答案。异常来自 this引用。我想补充一些细节。所以这里有两个关于如何制作动画的工作版本:

与 Meteor.defer()

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

(我们实际上不需要这里的 else block ，因为如果重绘元素， meteor 将删除 selected 类。)

或使用 $().animate()

Template.myItem.rendered = function(){
  if(Session.get("selected_item") === this.data._id){
    $(this.firstNode).animate({
      left: "-20px"
    }, 300);
  }
};

如果您使用 jQuery 方法，则需要删除 CSS 代码。

<罢工>

<罢工>

.myItem { transition: all 200ms 0ms ease-in; }
.selected { left: -20px; }

<罢工>

Answer 1

试试这个，因为 defer 回调中的 this 指针与直接在渲染回调中执行的代码不一样

Template.myItem.rendered = function(){
  var self = this;
  Meteor.defer(function() {
    if(Session.get("selected_item") === self.data._id){
      $(self.firstNode).addClass("selected");
    } else {
      $(self.firstNode).removeClass("selected");
    }
  });
};