流星:删除帖子,并使用_uihooks为其他帖子设置动画

Question

在Meteor中,当我从一个集合中删除一个帖子时,我希望该帖子下面的帖子向上滑动,取消删除帖子的位置.

我已经读过我应该使用_uihooks来做到这一点,但我只是不确定如何实现它.

有人可以帮助我,可能只有一个来自Meteorpad的简单例子吗？

Answer 1

您想要实现的目标非常简单，并且您实际上并不需要第三方库来做到这一点。我认为这里唯一的问题是_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

如果您想更好地了解_uihooksAPI 的实际工作原理，请在此处查看 Meteor 的源代码：

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

陷阱

insertElement最初渲染元素时不会调用。因此，如果您计划在插入新元素时执行动画，请务必考虑到这一点。