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

Question

我正在尝试对div元素进行动画处理，因为它会将自己重新定位在已排序的div列表中，因此它不会立即跳转，而是平滑过渡。 列表数据来自Mongo集合，每个文档都产生一个模板（一个div元素）。 每个文档都有一个“投票”属性，根据该属性对列表进行排序。 登录的用户可以为每个帖子投票一次，并且如果帖子达到更高的投票数，它将被重新定位。

如果有人熟悉它，我会关注“发现流星”一书。 这是通过设置CSS过渡属性来处理的： transition: all 300ms 0ms ease-in; ，在旧位置重新渲染帖子，然后在重新渲染后更改帖子的相对位置。 后者当然是在onRendered函数中处理的。

这是麻烦开始的地方。 显然，一旦div元素获得足够的投票来更改其位置，onRendered便不会触发。

因此，我的问题是：一旦列表重新排序，如何为元素更改位置动画？

编辑：这是代码：

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

我建议使用Blaze的_uihooks 。 您可以注册一个挂钩，当Blaze打算移动相应的DOM元素时，该挂钩将被调用。

例如：

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;
});