Question

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

基本上，我想要一个优雅的解决方案来淡化#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();
}

但问题是它只会在 second 中消失到最后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);
}

Meteor #each：新项目的动画输入

1 个答案: