数据库更改时闪烁的文本[重复]答案

【问题标题】：Blinking text on database changes [duplicate]数据库更改时闪烁的文本[重复]
【发布时间】：2015-09-27 22:56:58
【问题描述】：

我正在开发一个带有消息窗口的小型应用程序。消息存储在数据库中，并通过获取 5 条最新消息进行更新：

scienceTeamMessages = new Meteor.Collection('scienceTeamMessages');

Meteor.methods({
    'sendMessageFromMS': function(message, destination) {

        if (destination === "scienceTeam") {
            scienceTeamMessages.insert({
                message: message,
                createdAt: new Date()
            });
        }
    }
});

这些消息然后在一个 html 模板中迭代：

{{#each messages}}
    <li><h6>{{message}}</h6></li>
{{/each}}

我想要的，但我不知道该怎么做，就是让最新消息闪烁几次，以便在新消息到达时引起用户的注意。比如，从黑色到红色淡入淡出 3 次。

有什么建议吗？我知道如何做 css，但我不确定如何对数据库进行更改。这就是为什么 SO 上的其他解决方案在这个特定问题上不起作用的原因。

【问题讨论】：

这不是重复的，因为它是一个特定于流星的问题

标签： mongodb meteor collections

【解决方案1】：

你需要在你的助手上设置这个逻辑：

Template.foo.helpers({
    messages: function() {
      var elements = scienceTeamMessages.find({},{sort: {created_at: -1}}).fetch();
      for (var i = elements.length - 1; i >= 0; i--) {
        elements[i].drawAttention = (i == 0);
      };
      return elements;
    },
})

<template name="foo">
  {{#each messages}}
    <li><h6 {{#if drawAttention}}class="burn-yours-eyes"{{/if}}>{{message}}</h6></li>
  {{/each}}
</template>

这段代码我没有测试，希望对你有帮助。

【讨论】：

【解决方案2】：

有关动画，请查看 cmets 中发布的链接：Imitating a blink tag with CSS3 animations

如果您想为特定时间限制添加动画，请使用 Meteor.setTimeout()。

要在 Meteor 中制作动画，请参阅此显微镜演示示例：https://github.com/DiscoverMeteor/Microscope/blob/master/client/templates/application/layout.js

最后，如果您想在将元素添加到集合时执行特定操作，请考虑使用cursor.observe 或cursor.observeChanges，此处记录：http://docs.meteor.com/#/full/observe

很多链接，但希望将所有这些结合在一起，您可以组合出您正在寻找的解决方案。

【讨论】：

这里的信息似乎足以让我弄清楚一些事情！