CODEWITHSUNDEEP
meteor
Jonah
Jonah

Reputation: 16212

Meteor transition effects for auto-updating content

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?

Upvotes: 4

Views: 1076

Answers (1)

Tom Coleman
Tom Coleman

Reputation: 3037

The easiest way would be using CSS transitions. Just ensure that the element is preserved (so it isn't replaced on re-draw, just patched):

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

Then go nuts with the 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;
 }

Upvotes: 2

Related Questions