4

meteor Leaderboard exampleを見ると、ビュー テンプレートのコンテンツが JavaScript アプリケーション ファイルの関数にどのようにバインドされているかがわかります。たとえば、「選択された」クラスを定義するビュー ファイルからのこのスニペットを考えて、どの名前が黄色で強調表示されるかを判断します。

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

私の質問は、この自動更新プロセスにトランジション効果をどのように追加しますか? たとえば、新しい名前がクリックされるたびに、黄色の強調表示が既存の名前の白にフェードアウトし、新しい名前の黄色にフェードアウトするようにしたいとします。流星でそれをどのように達成できますか？

4

1 に答える 1

2

最も簡単な方法は、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;
 }
于 2012-10-18T23:36:10.880 に答える