animation - meteor #each : animate entry of new items

Question

我有一个简单的聊天应用程序，我用它来学习 Meteor。我真的很喜欢在我见过的其他聊天平台上淡出新消息的美感。

基本上，我想要一个优雅的解决方案来在我的#each block 中淡入新数据行。

这是我尝试过的:

{{#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 block 中的内容包装在不同的模板中，并使用该模板的 rendered Hook 来应用我的 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);
}