流星反应列表转换答案

【问题标题】：Meteor reactive list transitions流星反应列表转换
【发布时间】：2014-07-09 02:28:46
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery meteor

【解决方案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
        } 
    };
};

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

已记录在 here。 Github 示例：javascript、coffeescript

【讨论】：

有趣。这似乎是我一直在寻找的。然而，Leaderboard 示例的工作示例在这里会非常有用。
@krivar 在排行榜中，您可以将 _uihooks 添加到排行榜模板的 tbody 中，因此在 Template.leaderboard.rendered 中添加： this.find('tbody')._uihooks ={};
this.firstNode._uihooks 指向正确的容器 div（没有 tbody）。但是我应该在 moveElement 函数中插入什么？我是否取出并插入正确的位置？我不认为 CSS 可以为它设置动画..
奇怪的是 moveElement 没有“下一个”参数，因为我怎么知道它试图定位“节点”的位置？编辑：哦，它确实..
我现在可以fadeOut.done(fadeIn)，但不如让div移动。

【解决方案2】：

使用马科斯的答案，我想出了一个妥协的解决方案。我没有移动元素，而是淡出旧的并淡入新的。使用slideDown和slideUp，看起来很流畅。

  Template.leaderboard.rendered = function () {
this.firstNode._uihooks = {
  moveElement: function (node, next) {
    $(node).animate({ height: 'toggle', opacity: 'toggle' }, 'slow').promise().done(function(){
      $(node).insertBefore(next).animate({ height: 'toggle', opacity: 'toggle' }, 'slow');
    });
  },
};

};

【讨论】：