Meteor transition effects for automatically updating content

Question

Looking at the example of the meteor leaderboard , I understand how the content in the presentation templates is tied to the functions in the javascript application file. For example, consider this snippet from a view file that defines a “selected” class to determine which name is highlighted in yellow:

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

The value {{selected}} defined and updated in this function from leaderboard.js:

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

My question is: how do you add transition effects to this automatic update process? For example, suppose we wanted the yellow highlight to disappear on the current name, and then, with a new click, clicked the new name on yellow. How could we achieve this in a meteor?

Answer 1

The easiest way is to use CSS transitions. Just make sure the element is saved (therefore, it is not replaced when re-drawing, just fixed):

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

Then go to the checkboxes with CSS transitions:

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