CODEWITHSUNDEEP
javascriptjquerymeteor
krivar
krivar

Reputation: 402

Meteor reactive list transitions

How do I make the reordering of list items appear animated, instead of jumping suddenly?

In other words, when the score changes, items should animate into place: https://www.meteor.com/examples/leaderboard

Upvotes: 1

Views: 1116

Answers (2)

Marco de Jongh
Marco de Jongh

Reputation: 5448

You should use _uihooks for the animations.

Add _uihooks to the dom element that will contain the list items.

So for the leaderboard the players are added to the tbody of the leaderboard template. Example:

Template.leaderboard.rendered = function () {
    this.find('tbody')._uihooks = {
        insertElement: function (node, next) {
            //insert logic
        },
        removeElement: function (node) {
            //Remove logic
        },
        moveElement: function (node) {
            //move logic
        } 
    };
};

Please note that when you use those hooks blaze, the responsibility for adding/removing/moving the node will be handed over the hook. So if your remove logic is bugged the node will not get removed.

It's documented here. Github examples: javascript, coffeescript

Upvotes: 6

krivar
krivar

Reputation: 402

Using Marcos answer, I came up with a compromise-solution. Instead of moving element, I fadeOut the old and fadeIn the new. Using slideDown and slideUp, it looks pretty smooth.

  Template.leaderboard.rendered = function () {
this.firstNode._uihooks = {
  moveElement: function (node, next) {
    $(node).animate({ height: 'toggle', opacity: 'toggle' }, 'slow').promise().done(function(){
      $(node).insertBefore(next).animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
    });
  },
};

};

Upvotes: 1

Related Questions