Question

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

<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" : '';
};

我的问题是：您如何向此自动更新流程添加转换效果？例如，假设我们希望黄色突出显示在现有名称上淡化为白色，然后在点击新名称时在新名称上淡入黄色。我们怎么能在流星中实现呢？

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;
 }

用于自动更新内容的流星转换效果

1 个答案: