用于自动更新内容的 meteor 过渡效果

Question

看the meteor leaderboard example ，我了解 View 模板中的内容如何绑定(bind)到 javascript 应用程序文件中的函数。例如，考虑定义“selected”类的 View 文件中的这个片段，以确定哪个名称以黄色突出显示:

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
  </div>
</template>

{{selected}} 的值在 leaderboard.js 的这个函数中定义并保持最新:

Template.player.selected = function () {
    return Session.equals("selected_player", this._id) ? "selected" : '';
};

我的问题是:您将如何在此自动更新过程中添加过渡效果？例如，假设我们希望黄色突出显示在现有名称上淡化为白色，然后在新名称上淡化为黄色，每当单击新名称时。我们如何在 meteor 中做到这一点？

Answer 1

最简单的方法是使用 CSS 过渡。只需确保元素被保留(因此它不会在重新绘制时被替换，只是修补):

 Template.player.preserve(['.player']);

然后疯狂地使用 CSS 过渡:

 .player {
   background-color: white;
   transition: background-color 500ms linear 0;
   -moz-transition: background-color 500ms linear 0;
   // etc
 }

 .player.selected {
   background-color: yellow;
 }