【问题标题】:Animating new data as it arrives in Meteor在新数据到达 Meteor 时对其进行动画处理
【发布时间】:2016-07-23 04:31:33
【问题描述】:

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

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

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

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

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

谢谢

【问题讨论】:

    标签: angularjs mongodb meteor styling angular-meteor


    【解决方案1】:

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

    1. 用文档的 id 填充表格行元素,以便以后能够访问它。 (<tr class="..." data-id="q1w2e3r4t5">...</tr>)
    2. 然后您可以将观察者附加到您的光标上,并为新添加的元素添加一个 CSS 类:cursor.observeChanges({added: (id) => $('[data-id=${id}]').addClass('animate')})
    3. 要启用动画,请在 CSS .animate 的某处定义您喜欢的任何动画。您可以在有关此的其他 SO 帖子中找到帮助。它可能就像 f.e.

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

    希望它对你有用。

    【讨论】:

      【解决方案2】:

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2020-07-27
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-01-14
        • 2016-01-21
        相关资源
        最近更新 更多