输入每一行时如何淡入文本？答案

【问题标题】：How to fade in text as each line is entered?输入每一行时如何淡入文本？
【发布时间】：2013-07-31 05:22:48
【问题描述】：

我有一个名为“日志”的集合。在应用程序的整个生命周期中，日志会反复填充，例如：

12:15 - User xyz doing something
12:13 - Server doing something
12:12 - Server starts

...等

这是一个简单的发布/订阅机制，没有添加任何内容。模板只是循环遍历集合的每个元素并根据需要对其进行格式化。每行都在一个 div 中，以便于样式化。

我想添加淡入淡出效果。我尝试向 div 添加一个淡入淡出（来自 boostrap），它适用于每次集合更改时的所有元素，也就是说，Meteor 似乎重新渲染了整个模板，而不是“添加”一个新元素到 div 列表。

有没有办法在流星中做到这一点？

谢谢

【问题讨论】：

标签： css meteor

【解决方案1】：

我不想回答我自己的问题，但解决方案如下。我希望它可以帮助某人：

在车把中：

<div id="{{_id}}" class="logItem fade-class">
  <span>{{logItem}}</span>
</div>

在 Template.js 中：

Template.myTemplate.preserve({
  '.item[id]': function (node) { return node.id; }
});

瞧！

【讨论】：

【解决方案2】：

Meteor 重新渲染模板，但 DOM 元素被保留。你只需要标记它们，这样你就不会再次触发淡入淡出：

Template.list.rendered = function() {
    _.each(this.findAll('.item'), function(element) {
        if($(element).data('faded')) return;
        $(element).data('faded', true);

        $(element).fadeIn(); // Or whatever you like here
    });
};

【讨论】：

遗憾的是，没有骰子。 .item 元素由handlebars 循环并重新渲染。我尝试通过在他们的选择器上使用保留在 Meteor 中来保留他们的状态，这只保留了新添加的行的状态。旧的仍在重新渲染，擦除 .data() 中找到的任何键/值对