流星#each：動畫的新項目

Question

進入我有我使用學習流星簡單的聊天應用程序。我非常喜歡在我見過的其他聊天平臺上淡化新消息的美感。

基本上，我想要一個優雅的解決方案淡入我的#each塊中的新數據行。

這是我已經試過：

{{#each messages}} 
    <li class="message"> {{ username }} says: {{ message }} </li> 
{{/each}} 

---

Tracker.autorun(function() { 
    Messages.find(); //reactive data dependency. 
    $('li.message:last-child').hide().fadeIn(); 
} 

但問題是，它只有在秒淡出持續li.message。我認爲這是因爲在DOM交互完成之前自動運行正在運行。

難道我連這樣的權利？有沒有辦法在#each幫手中動畫新的數據行？

我看了this answer但似乎依靠用戶點擊事件。我更喜歡非交互式版本。

在此先感謝。

Answer 1

我找到了一個完美的解決方案;事實上，我不知道爲什麼我沒有早點想到這一點。但是，如果某人有很好的貢獻，我會等一會兒接受我自己的答案。

本質上，我的解決方案是將#each塊中的內容封裝在不同的模板中，並使用該模板的rendered掛鉤來應用我的jQuery動畫。

{{#each messages}} 
    {{>message}} 
{{/each}} 

.... 

<template name="message"> 
    <li class="message"> {{ username }} says: {{ message }} </li> 
</template> 

---

Template.message.rendered = function() { 
    this.$(".message").hide().fadeIn(500); 
}