Question

我试图为div元素设置动画，因为它会在排序的div列表中重新定位div，因此它不会立即跳转，而是平滑过渡。列表数据来自Mongo集合，每个文档都生成一个模板（div元素）。每个文件都有一个＆＃39;投票＆＃39;属性，基于该属性对列表进行排序。登录用户可以为每个帖子投票一次，如果帖子达到更高数量的upvotes，则会重新定位。

我跟随发现流星书，以防有人熟悉它。这是通过设置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;
});

动画div元素更改其在div列表中的位置

1 个答案: