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