流星動畫

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

這將是非常高興看到任何想法如何每次都使動畫作品。

UPDATE

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塊，因爲如果它重繪項目流星將刪除selected類。 ）

或$().animate()

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

如果你使用，你需要刪除的CSS代碼jQuery的方法。

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

Answer 1

試試這個，因爲如果代碼中呈現回調

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