meteor - Meteor transition effects for auto-updating content

Question

Looking at the meteor leaderboard example, I understand how content in the view templates is bound to functions in the javascript application file. For example, consider this snippet from the view file which defines the "selected" class to determine which name is highlighted yellow:

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

The value of {{selected}} is defined and kept up to date in this function from leaderboard.js:

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

My question is: How would you add transition effects to this auto updating process? For example, say we wanted the yellow highlighting to fade to white on the existing name, and then fade into yellow on the new name, whenever a new name was clicked. How could we accomplish that in 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;
 }