带有 CSS 过渡的流星模板 [英] Meteor templates with CSS transitions

问题描述

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

Meteor seems to skip CSS transitions when these are triggered through a template helper. Is there a way to work around this?

示例:

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

然后，myhelper"将通过模板助手获得一个触发 css 转换的类名.但是，出于某种原因，应用了该类但跳过了转换.

Then, "myhelper" would get assigned, through a template helper, a classname that triggers a css transition. But, for some reason, the class is applied but skipping the transition.

我认为这会在模板数据源更改时与 Meteor 的自动呈现冲突，但我不知道如何解决(我想避免为此使用 jquery).

I assume this conflicts with Meteor's auto-rendering when the template data sources change, but I don't know how to get around it (I'd like to avoid using jquery for this).

推荐答案

Meteor 尚不支持渲染新模板后的 CSS 转换.原因是当再次渲染模板 example-template 时，新的 HTML 只是附加到具有新类名的 DOM.由于 DOM 发生变化，因此不会发生转换.

CSS transitions after rendering a new template aren't yet supported by Meteor. The reason is that when rendering the template example-template again, the new HTML is just appended to the DOM with the new classname. Since the DOM changes, the transition doesn't happen.

最好的办法是将 rendered 事件与 loading 类名结合使用:

Your best bet is to use the rendered event in combination with a loading classname:

<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
}

这篇关于带有 CSS 过渡的流星模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！