如何为 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 class 是 animate。

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

How to animate enter and leave of MeteorJS {{#if}} block?

animation

meteor

spacebars