如何动画进入和离开MeteorJS {{#if}}块？

Question

标题真的说明了一切。给出一个模板：

{{#if selection}}
    <div class="something">
        <p>To Animate</p>
    </div>
{{/if}}

如何控制进入和退出.something的动画？

感谢。

Answer 1

您必须从包含要设置动画的内容的DOM中创建模板：

<templte name="somthing">
<div class="parentdiv">
{{#if selection}}
    <div class="something">
        <p>To Animate</p>
    </div>
{{/if}}
<div>
</template>

然后您可以使用_ui_hooks

Template.something.onRendered(function() {

this.find('#task-list')._uihooks = {
      insertElement: function(node, next) {
        $(node).addClass('animate')
          .insertBefore(next);

        setTimeout( function () {
          $(node).removeClass('animte');
        }, 20);
      },
      removeElement: function (node) {
        $(node).addClass('animate')
          .on(EVENTS, function() {
            $(node).remove()
          });
      },
    }
});

所以这里包含动画的css类是animate。