对div元素进行动画处理，更改其在div列表中的位置

Question

I'm trying to animate a div element as it repositions itself in a sorted div list, so it doesn't make an instant jump, but a smooth transition. The list data comes from a Mongo collection and every document yields a template (a div element). Every document has a 'votes' property, based on which the list is sorted. The logged-in user can vote once for every post, and if a post reaches a higher number of upvotes it gets repositioned.

I'm following the Discover Meteor book, in case anyone is familiar with it. This was handled by setting a CSS transition property: transition: all 300ms 0ms ease-in; , re-rendering the post in the old spot, then changing the relative position of the post once it's re-rendered. The latter was, of course, handled in the onRendered function.

This is where the trouble starts. Apparently, onRendered doesn't fire once the div element receives enough votes to change its position.

So, my question would be: how do I animate the element changing its position, once the list gets re-ordered?

EDIT: Here's the code:

Template.postItem.onRendered(function(){
    //animate post from previous position to new position
    console.log(/*something so I know the onRendered function is firing*/);
    var instance = this;
    var rank = instance.data._rank;

    var $this = $(this.firstNode);
    var postHeight = 80;
    var newPosition = rank * postHeight;

    //if element has currentPosition (i.e. is not first ever rendered)
    if(typeof(instance.currentPosition)!=='undefined'){
        var previousPosition = instance.currentPosition;
        //calculate difference between old position and new position and send
        //element there
        var delta = previousPosition - newPosition;
        $this.css("top", delta + "px");
    }

    //let it draw in the old position, then...
    Meteor.defer(function(){
        instance.currentPosition = newPosition;
        //bring element back to its new original position
        $this.css("top", "0px");
    });
});

Answer 1

I recommend to use Blaze's _uihooks . You could register a hook which will be called when Blaze intends to move the respective DOM element.

For example:

var hook = {
    moveElement: function(node, next) {
        var $node = $(node);
        /* Add animation code. */
        $node.animate();
    }
}

Template.postItem.onRendered(function() {
    /* Set hook to first node. */
    this.firstNode._uihooks = hook;
    /* Or to any other DOM element. */
    this.find('.postItem')._uihooks = hook;
});