Question

我正在处理一个有消息窗口的小应用程序。消息存储在数据库中，并通过获取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上的其他解决方案在这个特定问题上不起作用的原因。

Answer 1

对于动画，请查看评论中发布的链接：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

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

Answer 2

您需要在助手上设置此逻辑：

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 个答案: