带有 CSS 过渡的 Meteor 模板答案

【问题标题】：Meteor templates with CSS transitions带有 CSS 过渡的 Meteor 模板
【发布时间】：2012-12-25 22:14:56
【问题描述】：

当通过模板助手触发 CSS 转换时，Meteor 似乎会跳过这些转换。有没有办法解决这个问题？

例子：

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

然后，“myhelper”将通过模板助手分配一个触发 css 转换的类名。但是，由于某种原因，应用了该类但跳过了转换。

我认为当模板数据源发生变化时，这与 Meteor 的自动渲染冲突，但我不知道如何解决它（我想避免使用 jquery）。

【问题讨论】：

标签： meteor

【解决方案1】：

Meteor 尚不支持渲染新模板后的 CSS 过渡。原因是当再次渲染模板 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
}

【讨论】：

【解决方案2】：

这应该会在新的 Meteor UI 登陆后变得更容易（参见 http://www.youtube.com/watch?v=pGQ-ax5cFnk），但在那之前，您可以使用模板的保留指令来做到这一点：

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 了解更多信息。

【讨论】：

像魅力一样工作！请仔细阅读文档：以最简单的形式，preserve 方法应该传递一个选择器数组，每个选择器最多匹配一个元素。这种技术的好处是您的代码保持完全反应性。
preserve 在最新的 Meteor 中不再存在。