如何动画进入和离开 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。