流星アニメーション

Question

私は、項目が選択された後に左にアニメートするアニメーションを実装しようとしています。 次のコードが機能します。しかし、時間のわずか約80％。

私も本当にすべてがアニメーションを行う準備ができていることを確認するMeteor.defer()にコードをラップしようとした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; } 

。

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リファレンスからのものです。私はいくつかの詳細を追加したい。

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

Meteor.defer()と、それはアイテムを再描画場合流星はselectedクラスを削除しますので、私たちは、実際にここに他のブロックを必要としません（：だからここにアニメーションを行う方法についての2つの作業のバージョンがあります。 ）

または$().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

コードがレンダリングコールバック

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