流星:删除一个帖子，并用_uihooks将其他帖子动画化

Meteor: removing a post, and animating the other posts with _uihooks

本文关键字：uihooks 并用 其他 动画 流星 一个 删除      更新时间：2023-09-26

在Meteor中，当我从集合中删除一个帖子时，我希望该帖子下的帖子向上滑动，占用被删除的帖子的位置。

我读到我应该使用_uihooks来做到这一点，但我只是不确定如何实现它。

有人可以帮助我，可能是一个简单的例子从Meteorpad?

你想要实现的是非常简单的，你真的不需要一个第三方库来做到这一点。我想这里唯一的问题是_uihooks没有很好地记录，所以你几乎要靠自己来弄清楚它是如何工作的。

大致思路如下:

Template.body.onRendered(function() {
    var container = this.$('.ui.page.grid')[0];
    container._uihooks = {
        insertElement: function(node, next) {
            // this is the default behavior
            container.insertBefore(node, next);
        },
        removeElement: function(node) {
            var $node = $(node);
            $node.removeClass('visible');
            // can't use Meteor.setTimeout here because
            // it will complain about setting timeouts
            // inside simulations ...
            setTimeout(function() {
                $node.remove();
            }, 1000);
        },
    };
});

还有一个叫做movedElement的钩子，但是你可能不需要它。

基本上，你需要获取一个容器元素，它将"监听"它的子数组中的变化。当插入或删除元素时，调用相应的钩子。node和next参数分别表示感兴趣的元素和它的下一个兄弟元素。

为给定的动作定义一个钩子，可以防止默认行为的发生，所以你要独自负责插入/删除元素。但这没关系，因为您有机会在完全摆脱元素之前执行相应的动画。这里是使用css动画附加到visible类。

要查看它在实践中是如何工作的，请访问这里:

http://uihooks-example.meteor.com

进一步阅读

示例的源代码可在GitHub上获得:

https://github.com/apendua/uihooks-example

如果你想更好地理解_uihooks API是如何工作的，请查看Meteor的源代码:

https://github.com/meteor/meteor/blob/devel/packages/blaze/domrange.js

陷阱

初始呈现元素时不调用insertElement。因此，如果你打算在插入新元素时执行动画，那么考虑到这一点是很重要的。

没有使用uihooks, Percolate Studio创建了一个很棒的名为Momentum的包，它使uihooks更容易使用(http://atmospherejs.com/percolate/momentum)!您可以将帖子模板包装为这样，以使已删除的帖子下面的帖子向上滑动为

{{#momentum plugin='fade'}}
  {{#each posts}}
    {{> Post}}
  {{/each}}
{{/momentum}}

下面是这个行为的一个Meteorpad示例http://meteorpad.com/pad/sGu4A4nrQ56cXywxr/Momentum%20example。好运！

相关文章：