突出顯示流星中最后插入的文檔

Question

我在同一頁面上有表單和對象列表。 當我插入新行時，很難看到新插入的行放置在哪里。 因此，我認為我可以為新插入的行上色/突出顯示（並可能在幾秒鍾后刪除突出顯示的內容）。

我怎樣才能做到這一點？ 我認為一種方法可以在服務器上使用返回插入的id的方法（ return Collection.insert(doc); ），並在客戶端上使用帶有

Meteor.call('insertDoc', function(err,result) {
    // do something with result
});

我想我可以使用reactive-var保存最后插入的行的ID，並在循環中使用

{{#each docs}}
  <li class="{{isActive}}">{{name}}</li>
{{/each}}

並且如果this._id等於最后插入的id的反應型var，則有一個幫助器返回active。

但這是最好的方法嗎？ 幾秒鍾后如何去除顏色？ 我在很多頁面上都看到過這種行為，但是我找不到任何教程/代碼片段來實現這一目的。

Answer 1

我編寫了一個程序包，該程序包使用Meteor的UI掛鈎在添加和刪除項目時淡入和淡出列表，以幫助用戶在數據更改時維護上下文：

https://github.com/mizzao/meteor-animated-each

在http://animated-each.meteor.com/上有一個演示。 您會看到隨着添加和刪除項目，它們逐漸淡入和淡出。 如果將項目插入屏幕外，則可見區域不會滾動。

這並不能完全滿足您的要求，但是您可以使用相同的思想來突出顯示出現的項目，而不是簡單的淡入。

請注意，所有這些操作都發生在UI呈現級別-而不是模板/代碼級別。 UI鈎子現在也沒有很好的文檔記錄，但是已經存在了一段時間。

Answer 2

我不知道您的方法是否最好，但這就是我要去做的方法。 至於動畫，我會使用CSS3動畫。 您可以從（ https://developer.mozilla.org/en-US/docs/Web/CSS/animation ）中進行很多選擇，並且可以輕松地使它們淡入標准顏色。 動畫也將僅應用於最后插入的項目（由於您的操作方式，只有最后一個項目才具有“活動”類）