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

2019年8月4日 191次阅读

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

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

最佳答案 最简单的方法是使用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;
 }
点赞