Meteor templates with CSS transitions

问题

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

Example:

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

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.

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).

回答1:

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.

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
}

回答2:

This is supposed to get easier after new Meteor UI lands (see http://www.youtube.com/watch?v=pGQ-ax5cFnk), but until then you can do this with a preserve directive for your template:

HTML:

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

JS:

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

See http://docs.meteor.com/#template_preserve for more info.

来源：https://stackoverflow.com/questions/14276331/meteor-templates-with-css-transitions

标签

meteor