在新数据到达 Meteor 时对其进行动画处理

Posted 2023-03-08

【中文标题】在新数据到达 Meteor 时对其进行动画处理

【英文标题】：Animating new data as it arrives in Meteor

【发布时间】：2016-07-23 04:31:33

【问题描述】：

我是流星和 minimongo 的新手，所以我有点不知道该怎么做，我已经做了研究，但找不到太多，因为我使用的是 angular+meteor 而不是 blaze。

我的服务器上有一个在我的客户端（角度）上订阅的集合。每次将新元素添加到我的服务器集合时，客户端都会同步并更新 minimongo，它工作正常。

现在我想为这个新的“事件”设置样式，例如，当一个新元素添加到我的 mongo 数据表（html）中的集合中时添加动画/淡化背景颜色（通过 ng- 在助手上迭代重复），但无法真正找到正确执行此操作的方法。

我找到了Cursors，它可能会解决问题，但我无法弄清楚我应该如何在我的角度前端实现它。

有人已经尝试过，或者可以为我的研究指明方向吗？

谢谢

【参考方案1】：

你是对的 - 光标可能会解决问题。特别是observeChanges 方法。由于您只是要求为您指明方向，而我对 Anguler 不熟悉，因此我不提供整个代码，仅提供一些建议：

用文档的 id 填充表格行元素，以便以后能够访问它。 (<tr class="..." data-id="q1w2e3r4t5">...</tr>) 然后您可以将观察者附加到您的光标上，并为新添加的元素添加一个 CSS 类：cursor.observeChanges(added: (id) => $('[data-id=$id]').addClass('animate'))

要启用动画，请在 CSS .animate 的某处定义您喜欢的任何动画。您可以在有关此的其他 SO 帖子中找到帮助。它可能就像 f.e.

@keyframes highlight from background-color: yellow; to background-color: white; .animate animation: highlight 1s;

希望它对你有用。

【参考方案2】：

您在使用 Cursor 时走在了正确的轨道上。您可以使用 cursor.observe(callbacks)。例如，您可以侦听添加事件，并在添加新文档时制作动画。