在Meteor中如何为模板添加动画效果

Question

有一个不错的库，但我只能用它来转换列表。（这可能是我的错误？）

然而，我想在计数器增加时翻转它。 我想到的解决方案对我来说看起来非常丑陋。 我从这里开始：

//counter.js
Template.counter.helpers({
    counter: function () {
        return Counts.get('counter');
    }
});

//counter.html
<template name="counter">
    <div class="ui clearing counterBlock">
        <h1 class="ui header centered">Contacts</h1>
        <h2 class="counter ui header centered">{{ counter }}</h2>
    </div>
</template>

对于未使用动画效果的版本，请

//counter.js
var prevCounter = 0, counterTpl;

Template.counterBlock.onRendered(function () {
    counterTpl = Blaze.render(Template.counter, $(".counter")[0]);
});

Template.counter.helpers({
    counter: function () {
        var c = Counts.get('counter');

        if (c != prevCounter) {
            $(".counter .animated").removeClass('flipInX').addClass('flipOutX');
            Meteor.setTimeout(function () {
                prevCounter = c;
                Blaze.remove(counterTpl);
                counterTpl = Blaze.render(Template.counter, $(".counter")[0]);
            }, 1000);
        }

        return prevCounter;
    }
});

//counter.html
<template name="counterBlock">
    <div class="ui clearing counterBlock">
        <h1 class="ui header centered">Contacts</h1>
        <h2 class="counter ui header centered">
        </h2>
    </div>
</template>

<template name="counter">
    <span class="animated flipInX">{{counter}}</span>
</template>

我对 Meteor 技术还比较陌生，但我想知道是否有一种适当的方式来实现简单反应式变化的动画效果。

- Masadow

Answer 1

Meteor提供了_uihook来为被删除或添加的DOM元素添加动画效果。

你可以在Github上找到示例。

以下是另一个示例，当从domElement中添加或删除元素时启用淡入/淡出动画。

domElement._uihooks = {
    insertElement: function(node, next) {
      $(node)
        .hide()
        .insertBefore(next)
        .fadeIn();
    },
    removeElement: function(node) {
      $(node).fadeOut(function() {
        $(this).remove();
      });
    }
  }

- Ryan Wu

---

uihooks 在需要进行 DOM 操作的列表中表现得非常出色。在这里，我只想要动画更新模板中的一个值。如果我错了，你能提供一个可行的示例吗？ - Masadow