Animate a template in Meteor

There's a good library but I could use it to transition lists only. (I might be doing wrong ?)

However, I wanted to flip a counter whenever it was incremented. The solution I came with looks really ugly to me. I went from :

//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>

for the non animated version to

//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>

I'm quite new to meteor universe but I'm still wondering if there's any proper way to animate a simple reactive change

---

Meteor do provided _uihook to animate DOM element which is removed or added

Theres are examples you can find on Github

Following are another example which enabled the fade-in/out animation when elements are added or removed from domElement

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

链接地址: http://www.djcxy.com/p/84238.html

上一篇: 流星中的菜单动画

下一篇: 在流星中为模板制作动画