流星反应列表转换

Question

如何使列表项的重新排序显示为动画,而不是突然跳跃？

换句话说,当分数发生变化时,项目应该动画到位:https://www.meteor.com/examples/leaderboard

Answer 1

你应该_uihooks用于动画.

添加_uihooks到将包含列表项的dom元素.

因此,对于排行榜,玩家被添加到排行榜模板的tbody中.例:

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

请注意,当您使用这些挂钩时,添加/移除/移动节点的责任将被解除.因此,如果您的删除逻辑被窃听,则该节点将不会被删除.

它在这里记录.Github的例子:javascript,coffeescript