3

テンプレート ヘルパーによって CSS トランジションがトリガーされると、Meteor は CSS トランジションをスキップするようです。これを回避する方法はありますか?

例：

<template name="example-template">
  <div class="example {{myhelper}}"></div>
</template>

次に、「myhelper」には、テンプレート ヘルパーを介して、css トランジションをトリガーするクラス名が割り当てられます。しかし、何らかの理由で、クラスは適用されますが、トランジションはスキップされます。

これは、テンプレート データ ソースが変更されたときに Meteor の自動レンダリングと競合すると思いますが、回避する方法がわかりません (これに jquery を使用することは避けたいと思います)。

4

2 に答える 2

2

新しいテンプレートをレンダリングした後の CSS トランジションは、Meteor ではまだサポートされていません。その理由は、テンプレートexample-templateを再度レンダリングすると、新しい HTML が新しいクラス名で DOM に追加されるだけだからです。DOM が変更されるため、遷移は発生しません。

あなたの最善の策は、クラス名renderedと組み合わせてイベントを使用することです:loading

<template name="example-template">
  <div class="example loading"></div>
</template>

Template['example-template'].rendered = function() {
  // remove the loading classname here, and have that trigger a transition
}
于 2013-01-11T12:03:02.077 に答える
0

これは、新しい Meteor UI が登場した後は簡単になるはずですが ( http://www.youtube.com/watch?v=pGQ-ax5cFnkを参照)、それまではテンプレートの preserve ディレクティブを使用してこれを行うことができます。

HTML:

<template name="example">
  <div id="example-div" class="example {{myhelper}}"></div>
</template>

JS:

Template.example.preserve(['#example-div']);

詳細については、 http://docs.meteor.com/#template_preserveを参照してください。

于 2013-11-12T21:37:12.400 に答える