Is it possible to display a UI transition to reflect changes in a collection with meteorjs?

Question

I would like to display a pulse transition when my collection change.

In my html file, I have that:

<template name="menuItemTag">
    <div class="app-menu-item-tag ui label">{{ count }}</div>
</template>

In my js file, I expose the count variable for my template like that:

Template.menuItemTag.count = function() {
    return MyCollection.find().count();
};

With that the count change in the ui when the collection is updated.

Now, I would like to display a pulse transition on my div label each time the count value change.

I tried to use the cursor.observe

Template.menuItemTag.rendered = function() {
    MyCollection.find().observe({
        added: function (id, user) {
            $('.app-menu-item-tag:nth(0)').transition('pulse');
        },
        removed: function () {
            $('.app-menu-item-tag:nth(0)').transition('pulse');
        }
    });
};

Unfortunately, it is call too many times when the template is rendered the first time. If initialy I have 40 items in my collection, the transition is played 40 times...

Is there a clean way for playing a ui transition on changes and avoid the collection initialisation?

Answer 1

Thanks sbking for your answer, I still have a problem on initialization of the collection.

I propose below to defer the first animation util the collection will be completely filled:

Template.menuItemTag.count = function() {
    return Session.get('count');
};

Template.menuItemTag.rendered = function() {
    var that = this;
    this.countComputation = Deps.autorun(function() {
        Session.set('count', MyCollection.find().count());

        // Cancel playing UI transition. The collection is not completely initialized
        if (that.handleTimeout) {
            Meteor.clearTimeout(that.handleTimeout);
        }

        // Play the UI transition without the timeout if the collection is initialized
        if (that.noNeedTimeoutAnymore) {
            $('.app-menu-item-tag:nth(0)').transition('pulse');
        }
        // Tentative to play the UI transition during the collection feeding
        else {
            that.handleTimeout = Meteor.setTimeout(function() {
                $('.app-menu-item-tag:nth(0)').transition('pulse');
                // At this point we know that the collection is totaly initialized
                // then we can remove the timeout on animation for the future update
                that.noNeedTimeoutAnymore = true;
            }, 1500); // You can adjust the delay if needed
        }
    });
};

Template.menuItemTag.destroyed = function() {
    this.countComputation.stop();
};

Answer 2

Try this:

Template.menuItemTag.count = function() {
    return Session.get('count');
};

Template.menuItemTag.rendered = function() {
    this.countComputation = Deps.autorun(function() {
        Session.set('count', MyCollection.find().count());
        $('.app-menu-item-tag:nth(0)').transition('pulse');
    });
};

Template.menuItemTag.destroyed = function() {
    this.countComputation.stop();
};