javascript - meteor react 列表转换

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

请注意，当您使用这些钩子(Hook) blaze 时，添加/删除/移动节点的责任将移交给钩子(Hook)。因此，如果您的删除逻辑有问题，节点将不会被删除。

已记录 here . Github 示例:javascript , coffeescript