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